Angular js - Как извлечь частичные данные из json-файла, расположенного на моем сервере, для подробного просмотра, передающего параметр?

Question

Я новичок в Угловом. Полагаю, это простой вопрос. У меня есть json-файл, который содержит разные объекты, размещенные на моем сервере. Я получил список с каждым объектом. Теперь, когда я нажимаю на каждый элемент (объект) списка, я хочу показать детали каждого из них в подробном представлении (отличном от вида списка). Я знаю, как перенаправить на это подробное представление с помощью параметра (id), но я не знаю, как визуализировать детали этого конкретного объекта. Здесь я показываю мой код:

data.json

[ 
{ 
"id": "1", 
"name": "james", 
"age": "20", 
"city": "NY" 
}, 
{ 
"id": "2", 
"name": "allan", 
"age": "21", 
"city": "London" 
}, 
{ 
"id": "3", 
"name": "thomas", 
"age": "22", 
"city": "Belfast" 
} 
] 

app.js

angular.module("myApp", ["controllers", "services", "directives", "ngRoute"]); 
angular.module("myApp").config(function($routeProvider) { 
$routeProvider 
    .when('/', { 
     templateUrl : 'templates/home.html', 
     controller : 'HomeCtrl' 
    }) 
    .when('/list', { 
     templateUrl : 'templates/list.html', 
     controller : 'ListCtrl' 
    }) 
    .when('/list/:id', { 
     templateUrl: 'templates/item.html', 
     controller: 'ItemCtrl' 
    }) 
    .otherwise({redirectTo: '/'}); 
}); 

controllers.js

... 
.controller('ListCtrl',function($scope, MyService) { 
$scope.list = {}; 
MyService.getData() 
    .then(function(result) {         
      $scope.list=result.data; 
      }) 
    .catch(function(error) { 
      console.log('There is an error.', error); 
      }); 
}) 
.controller('ItemCtrl',function($scope, $routeParams, MyService, $location) { 
var id = $scope.id = $routeParams.id; 
$scope.item = {}; 
MyService.getData() 
    .then(function(result) { 
      $scope.item=result.data; 
       if(id) { 
        return result.data[id] 
       } 
      }) 
    .catch(function(error) { 
      console.log('There is an error.', error); 
      }); 
}) 

service.js

... 
.factory('MyService', function($http) {  
return { getData: getData }; 
function getData() { 
    return $http.get('data.json'); 
} 
}) 

item.html

<div ng-controller="ItemCtrl"> 
    <p>{{item.name}}</p> 
    <p>{{item.city}}</p> 
</div> 

Любое предложение?

Заранее благодарен!

Answer 1

Вы можете загрузить список объектов своей службой, и вы можете сохранить их в переменной внутри службы, чтобы вы не обращались к службе (чтобы получить json-файл) каждый раз, если вам не нужно получить последние данные все время.

Если у вас есть проблемы с кодом ниже проверьте plunkr: https://plnkr.co/edit/1k3RhxIWnsdY7rPViRhK?p=preview

В вашей службы вы можете сделать это

... 
.factory('MyService', function($http, $q, $filter) {  

    var itemList = []; 
    var self = {}; 

    self.getList = getList; 
    self.getItem = getItem; 

    return self; 

    function getList(){ 
     var defer = $q.defer(); 

     $http.get('data.json').then(function(response){ 
      itemList = response.data; 
      defer.resolve(itemList); // you can do data manipulation here if you need to 
     },function(error){ 
      defer.reject(error); //you can customize your error 
     }); 

     return defer.promise; 
    } 

    function getItem(itemId){ 
     if(itemList){ 
      var found = $filter('filter')(itemList, {id:itemId}, true); 

      return found[0]; //the [0] is to get the first item since found is an array 
     } 
    } 
}) 

Вы можете загрузить данные (элементы) в контроллере списка до того контроллер загружает ваш маршрут. Убедитесь, что вы вводите «элементы» в свой контроллер.

angular.module("myApp").config(function($routeProvider) { 
    $routeProvider 
     .when('/list', { 
     templateUrl: 'templates/list.html', 
     controller: 'ListCtrl', 
     resolve: { 
      items: function(MyService){ 
       MyService.getList().then(function(response){ 
        return response 
       }); 
      } 
     } 
    }) 
    . 
    ...Other Routes Here... 
    .otherwise({redirectTo: '/'}); 

});

Теперь в контроллере элемента вы можете сделать это

.controller('ItemCtrl',function($scope, $routeParams, MyService) { 
    var id = $routeParams.id; 

    $scope.item = MyService.getItem(id); 

})