Question

我试图遍历＆＃34;标签＆＃34;在使用AngularJS的Json对象中？我该怎么办？

var model = {
    "$id": "1",
    "tabs": [{
        "$id": "2",
        "id": 2,
        "name": "Output",
        "layoutId": 1,
        "order": 1,
        "dashboardId": 1
    }, {
        "$id": "15",
        "id": 3,
        "name": "Yield",
        "layoutId": 1,
        "order": 2,
        "dashboardId": 1
    }, {
        "$id": "24",
        "id": 4,
        "name": "Trend",
        "layoutId": 1,
        "order": 3,
        "dashboardId": 1
    }],
    "id": 1,
    "name": "Test",
    "title": "Test",
    "description": "Test Dashboard",
    "createDate": "2015-06-08T00:00:00+01:00",
    "ownerId": 1,
    "enabled": true
};

当我尝试这个时，我会得到＆＃34;未定义＆＃34;在控制台中。

angular.forEach(model.tabs, function (tab) {
    console.log(tab.name);
});

不确定我做错了什么？

编辑：数据来自ASP.Net控制器：

$http.get("/Dashboards/GetDashboardData").success(function (data) {
            model = data;
            angular.forEach(model.tabs, function (tab) {
                console.log(tab.name);
            });
        }).error(function (data) {
            console.log("error");
        });

Answer 1

我希望在你循环的时候模型没有准备好。打开检查器运行以下代码 - 您拥有的代码是正确的，但在您的情况下失败，因为运行循环时model尚未就绪。

如果您正在异步加载数据，则需要等待数据返回，使用promise或回调，然后循环执行。

var model = {
    "tabs": [{
        "name": "Output",
    }, {
        "name": "Yield",
    }, {
        "name": "Trend",
    }],
};

angular.forEach(model.tabs, function (tab) {
    console.log(tab.name);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Answer 2

好的，我找到了答案。看起来我的控制器将Json对象作为字符串返回，因此我必须将其切换为对象才能将其用作对象。

我在循环中使用模型之前添加了这一行：

model = JSON.parse(data);

承诺的整个解决方案（不确定我现在是否需要）：

DataService.getDashboardData().then(function (data) {
        model = JSON.parse(data);
        angular.forEach(model.tabs, function (tab) {
            console.log(tab);
        });
    });

 app.service("DataService", ["$http", "$q", function ($http, $q) {
    return {
            getDashboardData: function () {
            var dfd = $q.defer();
                     $http.get('/Dashboards/GetDashboardData').success(function (result) {
                        dfd.resolve(result);
                });
            return dfd.promise;
        }
    };
}]);

如何遍历此Json对象（angularJS）？

2 个答案: