Filter selections from JSON in Angular based on array of values

Question

So my data-set looks like this (much more stats behind it but lets keep this simple):

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

Doing just fine displaying all of the items via a simple:

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

Now let's say I'm storing friends and have a different section that only lists specific people. Take, for example, an array such as:

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

How would I go about writing a function that would return:

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

Essentially, I want to search through all of the peopleData and return a smaller array based upon several values contained within an array?

Surely there has to be a simple method to use .filter() to find multiple strings as acceptable values?

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

I think I'm just missing a small piece here...

var friends = ["Name4", "Name9"];. There is no space before digit ? — Rayon
– Rayon, Commented Jun 14, 2016 at 7:47
@Rayon There will be no spaces in the fields. Sorry for the quick typeup. Editing... — Nicholas Hazel
– Nicholas Hazel, Commented Jun 14, 2016 at 7:49

Rayon · Accepted Answer · 2016-06-14 07:52:10Z

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

answered Jun 14, 2016 at 7:52

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pawan Nogariya · Accepted Answer · 2016-06-14 07:51:41Z

0

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

answered Jun 14, 2016 at 7:51

Pawan Nogariya

9,04614 gold badges61 silver badges137 bronze badges

Comments

Nina Scholz · Accepted Answer · 2016-06-14 08:08:40Z

0

For a greater data amount, you could use a hash table for faster lookup

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

In ES6 you could filter it with Array.includes.

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

edited Jun 14, 2016 at 8:08

answered Jun 14, 2016 at 7:54

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Collectives™ on Stack Overflow

Filter selections from JSON in Angular based on array of values

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related