How to filter array when object key value is in array

JavascriptAngularjsAngular Filters

Javascript Problem Overview


I have an array model as below:

records:[{
    "empid":1,
    "fname": "X",
    "lname": "Y"
},
{
    "empid":2,
    "fname": "A",
    "lname": "Y"
},
{
    "empid":3,
    "fname": "B",
    "lname": "Y"
},
{
    "empid":4,
    "fname": "C",
    "lname": "Y"
},
{
    "empid":5,
    "fname": "C",
    "lname": "Y"
}
]

Now I have an array of empid's [1,4,5].

So now I need to filter the first array which contains all the keys in my second.

Output:

records:[{
    "empid":1,
    "fname": "X",
    "lname": "Y"
},
{
    "empid":4,
    "fname": "C",
    "lname": "Y"
},
{
    "empid":5,
    "fname": "C",
    "lname": "Y"
}
]

I can do this using a forEach loop in angular but as I have more than 100 records in my model object. I need a suggestion on how to handle this in much better way.

I am thinking of creating a custom filter, but what is your take on it.(If yes please provide sample code to achieve this).

Javascript Solutions


Solution 1 - Javascript

You can do it with Array.prototype.filter(),

var data = { records : [{ "empid": 1, "fname": "X", "lname": "Y" }, { "empid": 2, "fname": "A", "lname": "Y" }, { "empid": 3, "fname": "B", "lname": "Y" }, { "empid": 4, "fname": "C", "lname": "Y" }, { "empid": 5, "fname": "C", "lname": "Y" }] }
var empIds = [1,4,5]
var filteredArray = data.records.filter(function(itm){
  return empIds.indexOf(itm.empid) > -1;
});

filteredArray = { records : filteredArray };

If​ the ​callBack​ returns a ​true​ value, then the ​itm​ passed to that particular callBack will be filtered out. You can read more about it here.​​​​​​

Solution 2 - Javascript

In 2019 using ES6:

const ids = [1, 4, 5],
  data = {
    records: [{
      "empid": 1,
      "fname": "X",
      "lname": "Y"
    }, {
      "empid": 2,
      "fname": "A",
      "lname": "Y"
    }, {
      "empid": 3,
      "fname": "B",
      "lname": "Y"
    }, {
      "empid": 4,
      "fname": "C",
      "lname": "Y"
    }, {
      "empid": 5,
      "fname": "C",
      "lname": "Y"
    }]
  };


data.records = data.records.filter( i => ids.includes( i.empid ) );

console.info( data );

Solution 3 - Javascript

This is a fast solution with a temporary object.

var records = [{ "empid": 1, "fname": "X", "lname": "Y" }, { "empid": 2, "fname": "A", "lname": "Y" }, { "empid": 3, "fname": "B", "lname": "Y" }, { "empid": 4, "fname": "C", "lname": "Y" }, { "empid": 5, "fname": "C", "lname": "Y" }], empid = [1, 4, 5], object = {}, result;

records.forEach(function (a) {
    object[a.empid] = a;
});

result = empid.map(function (a) {
    return object[a];
});
document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');

Solution 4 - Javascript

You can use Array#filter function and additional array for storing sorted values;

var recordsSorted = []

ids.forEach(function(e) {
    recordsSorted.push(records.filter(function(o) {
        return o.empid === e;
    }));
});

console.log(recordsSorted);

Result:

[ [ { empid: 1, fname: 'X', lname: 'Y' } ],
  [ { empid: 4, fname: 'C', lname: 'Y' } ],
  [ { empid: 5, fname: 'C', lname: 'Y' } ] ]

Solution 5 - Javascript

Fastest way (will take extra memory):

var empid=[1,4,5]
var records = [{ "empid": 1, "fname": "X", "lname": "Y" }, { "empid": 2, "fname": "A", "lname": "Y" }, { "empid": 3, "fname": "B", "lname": "Y" }, { "empid": 4, "fname": "C", "lname": "Y" }, { "empid": 5, "fname": "C", "lname": "Y" }] ;

var empIdObj={};

empid.forEach(function(element) {
empIdObj[element]=true;
});

var filteredArray=[];

records.forEach(function(element) {
if(empIdObj[element.empid])
    filteredArray.push(element)
});

Solution 6 - Javascript

Old way of doing it. Many might hate this way of doing but i still many time find this is still better in my perspective.

Input:

var records = [{
    "empid":1,
    "fname": "X",
    "lname": "Y"
},
{
    "empid":2,
    "fname": "A",
    "lname": "Y"
},
{
    "empid":3,
    "fname": "B",
    "lname": "Y"
},
{
    "empid":4,
    "fname": "C",
    "lname": "Y"
},
{
    "empid":5,
    "fname": "C",
    "lname": "Y"
}
]

var newArr = [1,4,5];

Code:

var newObj = [];
for(var a = 0 ; a < records.length ; a++){
 if(newArr.indexOf(records[a].empid) > -1){
  newObj.push(records[a]);
 }
}

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

Reference - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

Output:

[{	"empid": 1,	"fname": "X",	"lname": "Y"}, {	"empid": 4,	"fname": "C",	"lname": "Y"}, {	"empid": 5,	"fname": "C",	"lname": "Y"}]

Solution 7 - Javascript

var records = [{
 "empid":1,
 "fname": "X",
 "lname": "Y"
},
{
 "empid":2,
 "fname": "A",
 "lname": "Y"
}

]


let search="A"
 
let values= Result.filter(item =>
     keys.some(key => 
         String(item[key]).toLowerCase().includes(search.toLowerCase()) 
     )
 );

multikey search in object Array eg.(empid,fname,lname)

Solution 8 - Javascript

In case you have key value pairs in your input array, I used:

.filter(
          this.multi_items[0] != null && store.state.isSearchBox === false
            ? item =>
                _.map(this.multi_items, "value").includes(item["wijknaam"])
            : item => item["wijknaam"].includes("")
        );

where the input array is multi_items as: [{"text": "bla1", "value": "green"}, {"text": etc. etc.}]

_.map is a lodash function.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionkrsnaadiView Question on Stackoverflow
Solution 1 - JavascriptRajaprabhu AravindasamyView Answer on Stackoverflow
Solution 2 - JavascriptTim ElsassView Answer on Stackoverflow
Solution 3 - JavascriptNina ScholzView Answer on Stackoverflow
Solution 4 - JavascriptisvforallView Answer on Stackoverflow
Solution 5 - Javascriptme_astrView Answer on Stackoverflow
Solution 6 - Javascriptblack_pottery_beautyView Answer on Stackoverflow
Solution 7 - Javascriptmanjit singhView Answer on Stackoverflow
Solution 8 - JavascriptPeter van der LelyView Answer on Stackoverflow