根据值数组过滤 Angular 中 JSON 的选择

Question

所以我的数据集看起来像这样 （背后有更多统计数据，但让我们保持简单）:

$scope.peopleData = [
  {"name": "Name1", "img": "name1Img.png"},
  {"name": "Name2", "img": "name2Img.png"}...
];

通过简单的方式显示所有项目就可以了：

<div ng-repeat="person in peopleData">
  <img src="img/people/{{person.img}}" alt="{{person.name}}" />
</div>

现在假设我正在存储朋友并且有一个不同的部分只列出特定的人。以一个数组为例：

var friends = ["Name4", "Name9"];

我将如何编写一个 return:

的函数

$scope.friends = [
  {"name": "Name4", "img": "name4Img.png"},
  {"name": "Name9", "img": "name9Img.png"}...
];

基本上，我想搜索所有的 peopleData 和 return 基于数组中包含的几个值的较小数组？

肯定有一个简单的方法来使用 .filter() 来查找多个字符串作为可接受的值吗？

$scope.friendData = peopleData.filter(friends);

我想我只是遗漏了一小部分...

Answer 1

function getFriendsDetails()
{
    var friends = ["Name4", "Name9"];
    var friendsDetails  = [];

    for(var i = 0; i<friends.length;i++)
    {
       var friend = friends[i];
       friendsDetails.push({"name":friend, "img":(friend.toLowerCase()+"Img.png")});
    }

    return friendsDetails;
}

Example Fiddle

Answer 2

Use Array#filter with Array#indeOf to test the value in array

var friends = [{
  "name": "Name4",
  "img": "name4Img.png"
}, {
  "name": "Name9",
  "img": "name9Img.png"
}, {
  "name": "Name10",
  "img": "name10Img.png"
}];
var friendsArr = ["Name4", "Name9"];
var friendData = friends.filter(function(item) {
  return friendsArr.indexOf(item.name) !== -1; //`item.name` exists in `friendsArr`
});
console.log(friendData);

Answer 3

对于更大的数据量，您可以使用哈希 table 来加快查找速度

var $scope = {},
    friends = ["Name4", "Name9"];

$scope.peopleData = [{ "name": "Name1", "img": "name1Img.png" }, { "name": "Name4", "img": "name4Img.png" }],

$scope.friendData = $scope.peopleData.filter(function (friends) {
    var hash = Object.create(null);
    friends.forEach(function (a) { hash[a] = true; });
    return function (a) { return hash[a.name]; };
}(friends));

console.log($scope.friendData);

在 ES6 中你可以用 Array.includes 过滤它。

$scope.friendData = peopleData.filter(a => friends.includes(a.name));

根据值数组过滤 Angular 中 JSON 的选择

Filter selections from JSON in Angular based on array of values

javascript

jquery

filter

angularjs

angular-filters