我如何访问angularjs中深层嵌套的json对象

时间:2022-12-01 16:31:14

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.

在这里,我想从第一页的Json数据访问*市场详细信息,虽然我无法访问子级别的市场细节,但我能够访问。我想在下一页显示子级市场名称。

$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*/

4 个解决方案

#1


1  

It should be:

它应该是:

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

JSFiddle

的jsfiddle

#2


1  

$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.

$ scope.markname是一个数组,您在第一个forEach中将项目推送到它中,但是在第二个尝试访问属性子市场时。这在markname数组中不存在,它存在于数组中的每个项目上。

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.

我已经完成了使用native forEach的示例,根本不需要角度来处理这里,它也隐藏了未定义的问题,因为本机可用于数组原型,如果你尝试调用undefined,它会引发异常,同时angular愉快地接受undefined并继续。

So a simple fix would be

所以一个简单的解决方案就是

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

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

请参阅小提琴: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);

#3


0  

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

您共享的json数据不正确。请仔细阅读这个演示。

HTML:

HTML:

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

</div>

JS:

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);
});

#4


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)

#1


1  

It should be:

它应该是:

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

JSFiddle

的jsfiddle

#2


1  

$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.

$ scope.markname是一个数组,您在第一个forEach中将项目推送到它中,但是在第二个尝试访问属性子市场时。这在markname数组中不存在,它存在于数组中的每个项目上。

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.

我已经完成了使用native forEach的示例,根本不需要角度来处理这里,它也隐藏了未定义的问题,因为本机可用于数组原型,如果你尝试调用undefined,它会引发异常,同时angular愉快地接受undefined并继续。

So a simple fix would be

所以一个简单的解决方案就是

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

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

请参阅小提琴: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);

#3


0  

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

您共享的json数据不正确。请仔细阅读这个演示。

HTML:

HTML:

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

</div>

JS:

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);
});

#4


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)