react-dev-in-training
react-dev-in-training

Reputation: 83

How to loop through array of numbers and match them with array of objects with same id

arr1:[1,4,5]
arr2:[
        { id: 1, title:'title', body:'body'},
        { id: 2, title:'title', body:'body'},
        { id: 3, title:'title', body:'body'},
        { id: 4, title:'title', body:'body'},
        { id: 5, title:'title', body:'body'},
        { id: 6, title:'title', body:'body'},
     ]

In React, I'm trying to grab the whole object of arr2 if the number from arr1 matches the ID of the object in arr2.

So from this example I am trying to get each object from arr2 with ID (1,4,5)

Upvotes: 0

Views: 963

Answers (4)

norbitrial
norbitrial

Reputation: 15166

Let me include here a different solution with reduce() and find() combination.

Array.prototype.reduce():

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

Array.prototype.find():

The find() method returns the value of the first element in the provided array that satisfies the provided testing function.

Try the following:

const arr1 = [1,4,5];
const arr2 = [
  { id: 1, title:'title', body:'body'},
  { id: 2, title:'title', body:'body'},
  { id: 3, title:'title', body:'body'},
  { id: 4, title:'title', body:'body'},
  { id: 5, title:'title', body:'body'},
  { id: 6, title:'title', body:'body'},
];

const result = arr2.reduce((a, {id,body}) => {
  if (arr1.find(e => id === e)) a.push({id, body});
  return a;
}, []);

console.log(result);

I hope that helps!

Upvotes: 0

Ele
Ele

Reputation: 33726

You can use the function Array.prototype.filter() along with the function Array.prototype.includes in order to filter the desired objects by id.

let arr1 = [1,4,5],
    arr2 = [{ id: 1, title:'title', body:'body'},{ id: 2, title:'title', body:'body'},{ id: 3, title:'title', body:'body'},{ id: 4, title:'title', body:'body'},{ id: 5, title:'title', body:'body'},{ id: 6, title:'title', body:'body'}],
    result = arr2.filter(({id}) => arr1.includes(id));
console.log(result);

Upvotes: 0

Peter Ambruzs
Peter Ambruzs

Reputation: 8213

You have to filter arr2 matching its ids.

  const arr1 = [1, 4, 5];
  const arr2 = [
    { id: 1, title: "title", body: "body" },
    { id: 2, title: "title", body: "body" },
    { id: 3, title: "title", body: "body" },
    { id: 4, title: "title", body: "body" },
    { id: 5, title: "title", body: "body" },
    { id: 6, title: "title", body: "body" }
  ];

  const result = arr2.filter(item => arr1.includes(item.id));

  console.log(result);

Upvotes: 3

prasana kannan
prasana kannan

Reputation: 676

Simple, filter through the data with the matching id from arr1

const arr1 =[1,4,5]
const arr2 =[
        { id: 1, title:'title', body:'body'},
        { id: 2, title:'title', body:'body'},
        { id: 3, title:'title', body:'body'},
        { id: 4, title:'title', body:'body'},
        { id: 5, title:'title', body:'body'},
        { id: 6, title:'title', body:'body'},
];

function findMatchData(sourceData, match) { 
  return sourceData.filter((current) => {
    return match.includes(current.id)
  });
}

console.log(findMatchData(arr2, arr1))

I hope this helps you!

Upvotes: 0

Related Questions