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

【问题标题】：Filter selections from JSON in Angular based on array of values根据值数组从 Angular 中的 JSON 过滤选择
【发布时间】：2016-10-14 19:53:44
【问题描述】：

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

$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"];

我将如何编写一个返回的函数：

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

基本上，我想搜索所有 peopleData 并根据数组中包含的多个值返回一个较小的数组？

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

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

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

【问题讨论】：

var friends = ["Name4", "Name9"];。数字前没有空格？
您是否尝试过将filter 与indexOf 一起使用？
@Rayon 字段中不会有空格。抱歉打字太快了。正在编辑...

标签： javascript jquery angularjs filter angular-filters

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

使用Array#filter 和Array#indeOf 来测试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);

【讨论】：

【解决方案3】：

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

【讨论】：