迭代服务返回的 JSON 角度答案

【问题标题】：Iterating over JSON returned by a Service on angular迭代服务返回的 JSON 角度
【发布时间】：2013-11-10 16:59:33
【问题描述】：

我正在尝试通过 id 进行迭代和搜索，并通过控制器中的 $resource 从下面显示的类型的 JSON 对象中返回与 id 对应的其他值。我不明白在这种情况下我错在哪里？请帮忙！

这是控制器

appSettings.controller('applistController', ['$scope', 'AppListService',
    function($scope, AppListService){
    // Have to iterate here to search for an id, how?
    // The Above app.json file is returned by the ApplistService(not showing the factory here as it works already.)
        $scope.allapps = AppListService.listAllApps().get();
    // console.log($scope.allapps.data) returns undefined as so does console.log($scope.allapps.length).
    // Where am I wrong?
    }
]);

JSON 的类型为：

{"data":[
    {
      "id":"files_trashbin",
      "name": "TrashBin",
      "licence":"AGPL",
      "require":"4.9",
      "shipped": "true",
      "active":true
    },
    {
      "id":"files_external",
      "name": "External Storage",
      "licence":"AGPL",
      "require":"4.93",
      "shipped":"true",
      "active":true
    }
    ],
  "status":"success"
}

【问题讨论】：

首先你的 json 不正确，"active":true 逗号是不必要的，你应该发送 AppListService 以更好地理解你的问题。
@lukpaw 我刚刚修复了 JSON 以使其有效。

标签： javascript json angularjs angularjs-resource

【解决方案1】：

我想AppListService.listAllApps().get(); 会返回承诺。听起来您在获得实际数据之前尝试打印。

我会使用以下方法：

var appSettings = angular.module('myModule', ['ngResource']);

appSettings.controller('applistController', ['$scope', 'AppListService',
function($scope, AppListService){

     AppListService.listAllApps()
                        .then(function (result) {
                           $scope.allapp = result;                           
                        }, function (result) {
                            alert("Error: No data returned");
                        });  

}]);


appSettings.factory('AppListService', ['$resource','$q',  function($resource, $q) {

  var data = $resource('somepath', 
         {},
        { query: {method:'GET', params:{}}}
                 );


       var factory = {

            listAllApps: function () {
              var deferred = $q.defer();
              deferred.resolve(data);
             return deferred.promise;
            }

        }
        return factory;
}]);

【讨论】：

不知道我是怎么错过的。非常感谢马克西姆！ :)

【解决方案2】：

这是显示根据您的 json 提取 id 值的代码。

var json = '{"data":[{"id":"files_trashbin","name":"TrashBin","licence":"AGPL","require":"4.9","shipped":"true","active":true},{"id":"files_external","name":"External Storage","licence":"AGPL","require":"4.93","shipped":"true","active":true}],"status":"success"}';
$scope.allapps = JSON.parse(json);
$scope.ids = new Array();
var sourceData = $scope.allapps["data"];
for (var i=0; i<sourceData.length; i++) {
    $scope.ids.push(sourceData[i].id);
}

这是一个 jsFiddle 给 an example of this extraction，与 Angular 集成。

此代码假定您的服务返回的 JSON 与您显示的相同。请注意 - 您的 JSON 文本中最初有一些多余和缺失的逗号（我随后修复了这些逗号），这也可能导致您看到的错误。

【讨论】：