AngularJS : ID가있는 json 배열에서 데이터 가져 오기

Question

데이터베이스에있는 모든 사람들의 정보를 저장하는 json 파일이 있습니다. 사실 웹 페이지의 이름과 성을 표시하는 데 사용하고 모든 사람의 세부 정보를 표시 할 가능성을 추가하고 싶습니다.

그래서 나는이 같은 사람의 ID를 사용하고 수행합니다

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

그것은 꽤 잘 작동, 내가 좋은 모든 사람을 위해 생성 된 페이지가 있습니다. 하지만 지금은 그 사람의 정보를 되찾고 싶습니다.

가장 쉬운 방법은 모든 사람을위한 json 파일을 가지고 있었을 것이지만, 나는 많은 파일을 가지고 있다는 생각을별로 좋아하지 않습니다. 내 생각은 people.json 파일을 반복하여 좋은 파일을 찾고 사용하는 것이지만 작동하지 않습니다. 그것이 작동하지 않기 때문에 어쩌면 내 솔루션이 나쁜, 잘

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() 기능을 변경하면 모든 것이 성공했을 때, 당신은 다음 person를 채우는 데 then()를 사용할 수 있습니다

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

Answer 2

하는 클릭에 같은 완전히 다른 이벤트입니다. 모든 사람이 사용할 수 그렇지 않으면이 논리는 HTTP 호출에 대한 성공 콜백의 일부 내부 이동이있는 가정

$scope.person = function(_id) { 
    return $.grep($scope.persons, function(item){ 
     return item.id == _id 
    })[0]; 
} 

: 당신은 GREP을 시도 할 수 있습니다.

Answer 3

저는 ECMAScript 5 filter을 사용하여 id로 사람을 얻었습니다. 그리고 id에 의한 검색을 성공 방법으로 옮겼습니다. 왜냐하면 우리는 ajax 호출을 다루고 있기 때문입니다.

예 :

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

      $scope.person = $scope.persons.filter(function(item){ 
      return item.id==routeParams.id //check for undefined; 
      }); 
     } 


     $scope.search(); 

    }]); 

라이브 예 : 당신의 도움에 대한 http://plnkr.co/edit/jPT6aC5UqLdHGJ1Clfkg?p=preview