AngularJS：找回从JSON数组数据与ID [英] AngularJS : get back data from a json array with an id

问题描述

我在那里我从所有的人都在我的数据库信息放养一个JSON文件。其实，我用它在Web页面中显示名字，姓氏和我想添加显示每个人的详细信息的可能性。

I have a json file where i am stocking informations from all the people in my database. I actually use it to display first name, last name in a web page and i want to add the possibility to display the details of every person.

要做到这一点我使用像这样的人的ID：

To do so i'm using the id of the person like this :

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

它的工作原理pretty很好，我对每个人，这是好的生成的页面。但现在我想获得的人回来的信息。

It works pretty well, i have a page generated for every person, which is nice. But now I would like to get the information of the person back.

最简单的方法将是有每个人一个JSON文件，但我特别不喜欢有这么多的文件的想法。
所以，我的实际想法是通过people.json文件进行迭代，找到好的并且使用它，但它不工作。

The easiest way would have been to have a json file for every person, but i don't particularly like the idea of having so much file. So my actual idea is to iterate through the people.json file to find the good one and using it but it's not working.

下面是我的控制器：

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

好吧，也许我的解决方案是坏的，因为它没有工作，但我没有找到另一种方式来做到这一点。

Well, maybe my solution is bad since it doesn't work, but i didn't find another way to do so.

现在我是你的：）

感谢您的阅读。

推荐答案

的问题是，你的 $ scope.search 方法中包含 $ HTTP。获得（）这是异步的。

The problem is that your $scope.search method contains $http.get() which is asynchronous.

这也就意味着你的下一行执行之前 JSON文件已被读取（即设置 $ scope.person 的）。因此， $ scope.persons 是在它执行的时候是空的。

What that means is your next line (the one that sets $scope.person) executes before the json file has been read. As such, $scope.persons is empty at the time it is executed.

您可以采取的事实，即 $ http.get（）返回一个可链接的答应这里。

You can take advantage of the fact that $http.get() returns a chainable promise here.

所以，如果你改变你的搜索（）函数返回的承诺，然后你可以使用则（）填充人时，一切都很顺利：

So if you change your search() function to return that promise, you can then use then() to populate person when everything has been successful:

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

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

}

（注意收益语句）。

然后改变人人口利用这样的：

Then change the person population to take advantage of this:

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

这篇关于AngularJS：找回从JSON数组数据与ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！