Question 49920 in Javascript Question posted in
A very good W3school tutorial can be found here.

filter json object with an array and return a new json with matching values of array – Javascript

    var structureInfos = [{ name: 'HMDB0006285', identifier: 'Six two eight 5' },
                          { name: 'HMDB0006288', identifier: 'Six two double eight'},
                          { name: 'HMDB0006293', identifier: 'Six two nine three' },
                          { name: 'HMDB0006294', identifier: 'Six two Nine Four' }]

    var structureElements = [ 'HMDB0006285', 'HMDB0006293', 'HMDB0006294' ]

I want to filter out the json object with values matching with an array and return a new json object. I tried the below, but does not seem to work.

Expected Output:

Expected : [
  { name: 'HMDB0006285', identifier: 'Six two eight 5' },
  { name: 'HMDB0006293', identifier: 'Six two nine three' },
  { name: 'HMDB0006294', identifier: 'Six two Nine Four' }
]

Below Code doesnt seem to work:

var newArray = [];
structureInfos.forEach(function(structureInfos) {
   for (let i=0; i < structureElements.length; i++){
        if(structureElements[i] === structureInfos[i]['name']){
           newArray.push(structureInfos[i]);
        }
   }
});
Tags:

3

Answers


  1. 0

    1st Method using map or filter

    var structureInfos = [{ name: 'HMDB0006285', identifier: 'Six two eight 5' },
                          { name: 'HMDB0006288', identifier: 'Six two double eight'},
                          { name: 'HMDB0006293', identifier: 'Six two nine three' },
                          { name: 'HMDB0006294', identifier: 'Six two Nine Four' }]

    var structureElements = [ 'HMDB0006285', 'HMDB0006293', 'HMDB0006294' ]
    
let newStructureInfos =     structureElements.map((ele)=>{
return structureInfos.filter((item)=>item.name === ele)
}).flat();
console.log(newStructureInfos)

    2nd Method filter or includes

      var structureInfos = [{ name: 'HMDB0006285', identifier: 'Six two eight 5' },
                              { name: 'HMDB0006288', identifier: 'Six two double eight'},
                              { name: 'HMDB0006293', identifier: 'Six two nine three' },
                              { name: 'HMDB0006294', identifier: 'Six two Nine Four' }]

var structureElements = [ 'HMDB0006285', 'HMDB0006293', 'HMDB0006294' ]

let newinfo = structureInfos.filter((item)=> structureElements.includes(item.name))
console.log(newinfo)

    3rd Method loop or spread operator

    var structureInfos = [{ name: 'HMDB0006285', identifier: 'Six two eight 5' },
                          { name: 'HMDB0006288', identifier: 'Six two double eight'},
                          { name: 'HMDB0006293', identifier: 'Six two nine three' },
                          { name: 'HMDB0006294', identifier: 'Six two Nine Four' }]
var structureElements = [ 'HMDB0006285', 'HMDB0006293', 'HMDB0006294' ]

let newInfo = [];
for(let item of structureInfos){
  if(structureElements.includes(item.name)){
    newInfo = [...newInfo,item]
  }
}
console.log(newInfo);

    4th method using loops

    var structureInfos = [{ name: 'HMDB0006285', identifier: 'Six two eight 5' },
                          { name: 'HMDB0006288', identifier: 'Six two double eight'},
                          { name: 'HMDB0006293', identifier: 'Six two nine three' },
                          { name: 'HMDB0006294', identifier: 'Six two Nine Four' }]

var structureElements = [ 'HMDB0006285', 'HMDB0006293', 'HMDB0006294' ]

let Info = []
for(let stinfo of structureInfos){
    for(let stele of structureElements){
        if(stinfo.name === stele){
          Info.push(stinfo);
          break;
        }
    }
}
console.log(Info)

    5th method using foeach

    var structureInfos = [{ name: 'HMDB0006285', identifier: 'Six two eight 5' },
                          { name: 'HMDB0006288', identifier: 'Six two double eight'},
                          { name: 'HMDB0006293', identifier: 'Six two nine three' },
                          { name: 'HMDB0006294', identifier: 'Six two Nine Four' }]

    var structureElements = [ 'HMDB0006285', 'HMDB0006293', 'HMDB0006294' ]
    
let newInfo = [];
structureInfos.forEach((element)=>{
  for(let i=0; i<structureElements.length; i++){
    if(element.name === structureElements[i]){
       newInfo.push(element);
       break;
    }
  }
})
console.log(newInfo)
    Login or Signup to reply.
  2. 0

    I see some errors in your code that probably explain why it isn’t working for you.

    var newArray = [];
structureInfos.forEach(function(structureInfos) {
  for (let i = 0; i < structureElements.length; i++) {
    if (structureElements[i] === structureInfos[i]['name']) {
      newArray.push(structureInfos[i]);
    }
  }
});

    It looks like you are iterating through your structureElements array inside your forEach(), but then you are using the same index identifier "i" when referencing structureInfos. With the forEach function the first argument in the callback is the current element of the array, so this should work better for you:

    var newArray = [];
structureInfos.forEach(function(structureInfo) { // Gave it a different name than the input array
  for (let i = 0; i < structureElements.length; i++) {
    if (structureElements[i] === structureInfo['name']) { // Removed the index identifier
      newArray.push(structureInfo); // Pushing the current record
    }
  }
});
    Login or Signup to reply.
  3. 0

    Here is a simple one liner solution using ES6 arrow function:

    const filteredArray = structureInfos.filter(info => structureElements.includes(info.name));
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search