How to Read Multiple dimensional JavaScript Object in AngularJS

Question

I have the following code:

var result2 = xmljs.xml2json(response.content);
console.log(result2);

In AngularJS now I want to get value of IsError from the following JavaScript object:

{
    "elements": [
        {
            "type": "element",
            "name": "s:Envelope",
            "attributes": {
                "xmlns:s": "http://schemas.xmlsoap.org/soap/envelope/"
            },
            "elements": [
                {
                    "type": "element",
                    "name": "s:Body",
                    "elements": [
                        {
                            "type": "element",
                            "name": "ValidateLoginResponse",
                            "attributes": {
                                "xmlns": "http://tempuri.org/"
                            },
                            "elements": [
                                {
                                    "type": "element",
                                    "name": "ValidateLoginResult",
                                    "attributes": {
                                        "xmlns:a": "http://schemas.datacontract.org/2004/07/BeehiveHrms.MobileServices",
                                        "xmlns:i": "http://www.w3.org/2001/XMLSchema-instance"
                                    },
                                    "elements": [
                                        {
                                            "type": "element",
                                            "name": "a:ErrorMsg",
                                            "attributes": [
                                                {
                                                    "type": "text",
                                                    "text": "Please enter valid username and password."
                                                }
                                            ]
                                        },
                                        {
                                            "type": "element",
                                            "name": "a:IsError",
                                            "elements": [
                                                {
                                                    "type": "text",
                                                    "text": "true"
                                                }
                                            ]
                                        },
                                        {
                                            "type": "element",
                                            "name": "a:IsActive",
                                            "elements": [
                                                {
                                                    "type": "text",
                                                    "text": "false"
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

Answer 1

It's in:

elements[0].elements[0].elements[0].elements[0].elements[1].elements[0].text

I hope it helps!

Answer 2

If you don't know under which elements it is located, you need a recursive search for your JSON. Pick your favourite approach and reach the children of children of all of your nodes until you find what you are searching for.

I assumed you are always looking for "name" property. Here is the demo:

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.JSON = { "elements": [{ "type": "element", "name": "s:Envelope", "attributes": { "xmlns:s": "http://schemas.xmlsoap.org/soap/envelope/" }, "elements": [{ "type": "element", "name": "s:Body", "elements": [{ "type": "element", "name": "ValidateLoginResponse", "attributes": { "xmlns": "http://tempuri.org/" }, "elements": [{ "type": "element", "name": "ValidateLoginResult", "attributes": { "xmlns:a": "http://schemas.datacontract.org/2004/07/BeehiveHrms.MobileServices", "xmlns:i": "http://www.w3.org/2001/XMLSchema-instance" }, "elements": [{ "type": "element", "name": "a:ErrorMsg", "attributes": [{ "type": "text", "text": "Please enter valid username and password." }] }, { "type": "element", "name": "a:IsError", "elements": [{ "type": "text", "text": "true" }] }, { "type": "element", "name": "a:IsActive", "elements": [{ "type": "text", "text": "false" }] } ] }] }] }] }] } // recursive function function findNode(elem, currentNode) { var i, currentChild, result; if (elem == currentNode["name"]) { // can be a dynamic key return currentNode; } else { if (currentNode["elements"]) { // can be a dynamic key for (i = 0; i < currentNode["elements"].length; i++) { currentChild = currentNode["elements"][i]; result = findNode(elem, currentChild); if (result !== false) { return result; // found } } } return false; // not found } } $scope.find = function() { var res; res = findNode($scope.search, $scope.JSON); if (res) { $scope.found = angular.copy(res.elements[0]); } else { $scope.found = null; } } $scope.search = "a:IsError"; $scope.find(); }); 

 <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> <input type="text" ng-model="search" /> <button ng-click="find()">Find</button> <br> <code>{{search}} : {{found}}</code> <hr> <button ng-click="s=!s">{{s ? 'Hide' : 'Show'}} JSON</button> <pre ng-show="s">{{JSON | json}}</pre> </div> </body> </html>