Search This Blog

Wednesday, September 30, 2015

AngularJS - XML to JSON from API

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>$http Service | AngularJS</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
(function() {
    var app = angular.module('app', []);
    app.controller('Controller', ['$scope', '$http', '$window', function($scope, $http, $window) {
       $scope.xml = '';
        var XMLFormat = "<test USERID='232323'>"
                         +"<test1>true</test1>"
                         +"<test2>true</test2>"
                         +"<test3>"
                            +"<test4>test value test value</test4>"
                            +"<test5>9999</test5>"
                         +"</test3>"
                         + "</test>";
        var xmlToJson = function (xml) {
            // Create the return object
            var obj = {};
            if (xml.nodeType === 1) { // element
                // do attributes
                if (xml.attributes.length > 0) {
                    obj["@attributes"] = {};
                    for (var j = 0; j < xml.attributes.length; j++) {
                        var attribute = xml.attributes.item(j);
                        obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
                    }
                }
            } else if (xml.nodeType === 3) { // text
                obj = xml.nodeValue;
            }
             //do children
            if (xml.hasChildNodes()) {
                for (var i = 0; i < xml.childNodes.length; i++) {
                    var item = xml.childNodes.item(i);
                    var nodeName = item.nodeName;
                    if (typeof (obj[nodeName]) == "undefined") {
                        obj[nodeName] = xmlToJson(item);
                    } else {
                        if (typeof (obj[nodeName].push) == "undefined") {
                            var old = obj[nodeName];
                            obj[nodeName] = [];
                            obj[nodeName].push(old);
                        }
                        obj[nodeName].push(xmlToJson(item));
                    }
                }
            }
            return obj;
        };
        $http({
            method  : 'GET',
            url: 'http://test.testing.com/testAPI.dll?API=Verify&XML='+XMLFormat+'',
            timeout : 10000,
            params: {},  // Query Parameters (GET)
            datatype: 'application/json',
            transformResponse: function (data) {
                //console.log(JSON.stringify(data));
                // string -> XML document object
                return $.parseXML(data);
                //return JSON.stringify(data);
                //return data;
            }
        }).success(function(data, status, headers, config) {
            console.log('$scope.xml');
            console.log(data);  // XML document object
            $scope.xml = JSON.parse(JSON.stringify(xmlToJson(data)));
            console.log(JSON.parse(JSON.stringify(xmlToJson(data))));
            // Changes XML to JSON
        }).error(function(data, status, headers, config) {
            $window.alert('error');
        });
    }]);
})();
</script>
</head>

<body ng-controller="Controller">
    <section>
        <h1>(Response is XML)</h1>
        <p ng-bind="xml"></p>
    </section>
</body>

</html>

No comments:

Post a Comment