基于当前URL路由筛选JSON数据

问题

我试图过滤json数据，并根据页面的当前URL，在一个有角度的页面上只显示其中的一部分

详细信息

我有一个包含100个JSON对象的列表，每个对象如下所示：

{
  "name": "Evangeline Perreault",
  "age_1": 1,
  "total_age": 1,
  "photo_small": "img/400/001_400.jpg",
  "photo_medium": "img/800/001_800.jpg",
  "photo_large": "img/1200/001_1200.jpg",
  "photo_extralarge": "img/1600/001_1600.jpg",
  "video": 67443664,
  "id": 1,
  "quote": "test quote here and here",
  "type": 1
},

“type”属性是我想用来过滤数据子集的属性。考虑到这一点，我尝试设置我的URL结构，将这里的type属性与我的URL绑定。这是我的路线：

angular.module('100_Ages', ['mydirectives', 'ngResponsiveImages']).
    config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/100_Ages/nav/:personType', {templateUrl: 'partials/person-list.html', controller: NavListCtrl}).
        otherwise({redirectTo: '/100_Ages'});
    }]);

因此，我在JSON中指出了指向“type”字段的路径，并尝试编写一个控制器将两者联系在一起

function NavListCtrl($scope, $routeParams, $http) {
  $http.get('person.json').success(function(data) {
  angular.forEach(data, function(person) {
          if (person.type == $routeParams.personType) 
            $scope.person = person;
        });
  });
}

这是我的部分模板：

我希望它能显示我使用的URL类型的所有匹配图像。因此，如果我在“/100_Ages/nav/3”上，我希望显示类型为“3”的对象的所有图像（大约10张图片）。但是，它仅显示类型为“3”的最后一个对象

因此，我尝试了一个

ng repeat

，如下所示：

<div class="nav_outer" ng-repeat="person in persons"><img class="nav_img" ng-src="{{person.photo_small}}" ng-alt="{{person.name}}" /></div>

我原以为会循环显示所有匹配的图像，但结果什么也没有显示

我认为我的问题与

angular.forEach

有关，但我不确定如何将JSON类型与页面的typeid联系起来

---

谢谢您的建议。

如果您将每个项目放入一个数组中，

ng repeat

应该可以工作。（另外，您指的是ng repeat中的“persons”对象，根据提供的代码，该对象不存在）。那么，试试这个：

$http.get('person.json').success(function(data) {
    $scope.persons = [];
    angular.forEach(data, function(person) {
        if (person.type == $routeParams.personType) 
            $scope.persons.push(person);
            // or alternatively - this.push(person), with the optional 3rd param of $scope.persons (I don't really understand that, but whatever...)
    });
});

现在填充数组后，您的

ng repeat=“person in persons”

应该可以工作了

更新：

如果success对象已经是一个对象数组，那么只需将scope对象设置为数组-无需遍历它们：

$http.get('person.json').success(function(data) {
    $scope.persons = data;    
})

---

对成功了！非常感谢。我很好奇，我所有的JSON对象都在一个数组中，那么为什么我必须将每个对象都放入自己的数组中才能让ng repeat工作呢？这是为了解决每个类型只显示一个结果的问题吗？再次感谢！