json - Angular : get back data from a json array with an id

Question

我有一个 json 文件，我在其中储存了我数据库中所有人的信息。我实际上用它来在网页中显示名字、姓氏，我想添加显示每个人的详细信息的可能性。

为此，我使用了这样的人的 ID:

.when('/people/:id', {templateUrl: 'partials/people-detail.html'})

效果很好，我为每个人生成了一个页面，这很好。但是现在我想取回那个人的信息。

最简单的方法是为每个人准备一个 json 文件，但我不太喜欢拥有这么多文件的想法。所以我的实际想法是遍历 people.json 文件以找到好的文件并使用它，但它不起作用。

这是我的 Controller :

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

PeopleController.controller('PeopleDetailCtrl', ['$scope', '$routeParams', '$http',
    function($scope, $routeParams, $http) {
        $scope.search = function() {
            var url = 'data/people.json';
            $http.get(url).success(httpSuccess).error(function() {
                alert('Unable to get back informations :( ');
            });
        }
        httpSuccess = function(response) {
            $scope.persons = response;
        }

        function getById(arr, id) {
            for (var d = 0, len = arr.length; d < len; d += 1) {
                if (arr[d].id === id) {
                    return arr[d];  
                }
            }
        }
        $scope.search();
        $scope.person = getById($scope.persons,$routeParams.id);
    }]);

嗯，也许我的解决方案不好，因为它不起作用，但我没有找到另一种方法。

现在我是你的了:)

感谢阅读。

Answer 1

问题是您的 $scope.search 方法包含异步的 $http.get()。

这意味着您的下一行(设置 $scope.person 的行)在读取 json 文件之前执行。因此，$scope.persons 在执行时为空。

您可以利用 $http.get() 返回可链接的 promise 的事实。在这里。

因此，如果您更改 search() 函数以返回该 promise ，则您可以使用 then() 来填充 person when everything已成功:

$scope.search = function() {
  var url = 'data/people.json';

  return $http.get(url).success(httpSuccess).error(function() {
    alert('Unable to get back informations :( ');
  });

}

(注意 return 语句)。

然后改变人口以利用这一点:

$scope.search().then(function(){
  $scope.person = getById($scope.persons,$routeParams.id);
});