how do i access deeply nested json object in angularjs

Question

Here, I am suppose to access the top level market details from the Json data on the first page which I'm able to although Im not able to access the sub level market details. Im suppose to display the sub level market names on the next page.

$scope.myData = {
  "market": [{
    "mid": 3,
    "mname": "mark1",
    "submarket": [{
      "id": 20,
      "name": "val1"
    }, {
      "id": 24,
      "name": "val2",
      "submarket": [{
        "id": 26,
        "name": "val21"
      }]
    }]
    "market": [{
      "mid": 4,
      "name": "mark1.1",
      "submarket": [{....
      }]
    }]
  }, {
    "mid": 6,
    "mname": "mark2",
  }]
};

$scope.markname = []; /*stores top level markets*/
angular.forEach($scope.myData.market, function(org) {
  $scope.markname.push(org)
}) /*works fine and has the details of market (mid:3 and mid:6)*/

$scope.submark = [];
angular.forEach($scope.markname.submarket, function(sorg) {
  $scope.submark.push(sorg)
}) /*doesn't store anything*/

markname is an array, it has no property submarket to iterate over, that would also be more noticeable if you used the native forEach instead of angulars forEach. Angulars version handles being passed undefined, whereas the native wont work if you call it of an undefined object, you'd get a type error. — ste2425
– ste2425, Commented Feb 22, 2016 at 7:54

michelem · Accepted Answer · 2016-02-22 08:01:00Z

1

It should be:

  $scope.submark = [];
  angular.forEach($scope.markname, function(sorg) {
    angular.forEach(sorg.submarket, function(subsorg) {
      $scope.submark.push(subsorg)
    });
  });

JSFiddle

answered Feb 22, 2016 at 8:01

michelem

14.6k5 gold badges55 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ken Over a year ago

this 1 works. Thanks. but the thing is, this array will store the details of sub level markets of all the main markets. what i want to do is display the sub markets of only that market that i choose to see (in the index all the top level market names are listed as options). What will help me achieve that

michelem Over a year ago

Play with ng-repeat and ng-show in HTML code taking the full myData.market array

ste2425 Over a year ago

Or either filter the array in your controller or use an ng-repeat with an angular filter in your view.

ste2425 · Accepted Answer · 2016-02-22 08:12:46Z

$scope.markname is an array and your pushing items into it on your first forEach, however in the second your trying to access the property submarket. This doesn't exist on the markname array, it exists on each item within the array.

Ive done my example using the native forEach there's no need for angular to get involved here at all, it also hides the undefined issue, as the native is available of the array prototype it throws an exception if you try to call it of undefined, whilst angular happily accepts undefined and continues.

So a simple fix would be

markname.forEach(function(sorg) {
    if (sorg.hasOwnProperty('submarket')) {
        submark.push(sorg.submarket);
    }
});

See fiddle: https://jsfiddle.net/0y6r0mw1/

edit: Its worth noting this will produce a multidimensional array, if this is not wanted you can concat them all together with something like:

submark.push.apply(submark, sorg.submarket);

Shashank · Accepted Answer · 2016-02-22 08:10:12Z

The json data that you have shared, is improper. Please go through this demo.

HTML:

<div ng-app="app" ng-controller="test">

</div>

JS:

var app = angular.module('app', []);

app.controller('test', function ($scope) {
    $scope.myData = {
        "market": [{
            "mid": 3,
            "mname": "mark1",
            "submarket": [{
                "id": 20,
                "name": "val1"
            }, {
                "id": 24,
                "name": "val2",
                "submarket": [{
                    "id": 26,
                    "name": "val21"
                }]
            }, {
                "mid": 4,
                "name": "mark1.1",
                "submarket": [{
                    "id": 27,
                    "name": "val221"
                }]
            }]
        }, {
            "mid": 6,
            "mname": "mark2",
        }]
    };

    $scope.markname = []; /*stores top level markets*/
    angular.forEach($scope.myData.market, function (org) {
        $scope.markname.push(org)
    }) /*works fine and has the details of market (mid:3 and mid:6)*/

    console.log('markname', $scope.markname);

    $scope.submark = [];
    angular.forEach($scope.markname, function (sorg) {
        angular.forEach(sorg.submarket, function (subM) {
            $scope.submark.push(subM)
        })
    })

    console.log('submark', $scope.submark);
});

Scott · Accepted Answer · 2017-08-04 13:15:40Z

0

function iterate(obj) {
    for (var property in obj) {
        if (obj.hasOwnProperty(property)) {
            if (typeof obj[property] == "object") {
                iterate(obj[property]);
            }
            else {
                console.log(property + "   " + obj[property]);
           }
        }
    }
} 
iterate(object)

edited Aug 4, 2017 at 13:15

Scott

1,9222 gold badges26 silver badges48 bronze badges

answered Aug 4, 2017 at 10:51

Jeeva Arulanandam

1416 bronze badges

Collectives™ on Stack Overflow

how do i access deeply nested json object in angularjs

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related