Compare one array with a nested array and push value into a new array with same index in Javascript

Question

I have 2 arrays

const arrayOne = [
 {id: '110'},
 {id: '202'},
 {id: '259'}
];

const arrayTwo = [
 {data: [{value: 'Alpha', id: '001'}]},
 {data: [{value: 'Bravo', id: '202'}]},
 {data: [{value: 'Charlie', id: '110'}]},
 {data: [{value: 'Delta', id: '202'}]}
];

I need to create a new array comparing arrayOne[idx].id with arrayTwo[idx].data[idx2].id

Upon match, I need to create an array pushing value (arrayTwo[idx].data[idx2].value) to the new array against each index in arrayOne.

In this example, I would get newArray = [null, 'Bravo', null, Delta]

What I have tried:

arrayOne.map(item => ({
   ...item,
   result: arrayTwo.filter(itemTwo => item.data.map(x => x.id).includes(itemTwo.id))
}));

and also

const newArr = [];
arrayOne.map((item, idx) => {
   if (arrayTwo.filter(itemTwo => itemTwo.data?.map(x => x.id) === item.id)) {
     newArr.push(arrayTwo.data[idx].value);
   } else newArr.push(null);
 });

Brother58697 · Accepted Answer · 2022-07-24 04:27:04Z

1

To do this you can map arrayTwo and use .find() to search for the ID in arrayOne. I also mapped arrayTwo to the inner object to make the second map more concise.

const arrayOne = [
 {id: '110'},
 {id: '202'},
 {id: '259'}
];

const arrayTwo = [
 {data: [{value: 'Alpha',id: '001'}]},
 {data: [{value: 'Bravo',id: '202'}]}, 
 {data: [{value: 'Charlie',id: '777'}]},
  {data: [{value: 'Delta',id: '202'}]}
];

const result = arrayTwo
  .map(obj => obj.data[0])
  .map(obj => (arrayOne.find(v => v.id === obj.id) && obj.value) || null)
  
console.log(result)

edited Jul 24, 2022 at 4:27

answered Jul 22, 2022 at 6:52

Brother58697

3,2082 gold badges8 silver badges22 bronze badges

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

5 Comments

Aaron Over a year ago

That's great, thank you for your answer. What if arrayTwo have multiple matches with arrayOne and a different value for each object? I have updated the arrayTwo in the question to reflect the same. Appreciate your response!

Brother58697 Over a year ago

@Aaron I updated the answer. Because these new requirements are pretty different from the original one, next time, I'd say it'd be better to post a new question, and link it in the comments here for us to take a look at it. That way we can maintain the context of the original answers.

Aaron Over a year ago

really appreciate it brother! I did create a new question, which is related to this same question but it includes more than 1 object in data array. This stackoverflow.com/questions/73095903/… is really my actual question. Thanks a ton!

Brother58697 Over a year ago

@Aaron Np problem! Mark this as the correct answer if it satisfies you for this question. If you can promise that the scope won't change again, I'll check out the new question ;P

Aaron Over a year ago

Done! The only change apart from an additional object in data in that question is that I no longer need to pass null values in place of the arrayOne index. Thank you sir!

Ian · Accepted Answer · 2022-07-22 07:29:20Z

Use map to iterate over each element of arr1 and return a new array.
Reassemble the data attribute array of each element in the arr2 array using map and flat
When arr1 traverses, you can get the current element id, use filter to filter the combined data array, and return an element array that matches the current element id.
Based on the case where the id is not matched, use the optional chain operator to get the value.
When returning
1. if you want to get the element array of the id and value attributes, use conditional (ternary) operator, when it doesn't match, return the original element, when it matches, use spread syntax, copy the current element attribute, and add the value attribute
2. if you only want to get an array of matching results, just return the value, remember to use the optional chain operator to convert the unmatched value to null.

const arr1 = [
  { id: '110' },
  { id: '202' },
  { id: '259' }
];

const arr2 = [
  { data: [{ value: 'Alpha', id: '001' }] },
  { data: [{ value: 'Bravo', id: '202' }] }
];

const result1 = arr1.map(o1 => {
  const data = arr2.map(o2 => o2.data).flat();
  const value = data.filter(o2 => o2.id === o1.id)[0]?.value;
  return value ? {...o1, value} : o1;
});

const result2 = arr1.map(o1 => {
  const data = arr2.map(o2 => o2.data).flat();
  const value = data.filter(o2 => o2.id === o1.id)[0]?.value;
  return value ?? null;
});

[result1, result2].forEach(r => console.log(JSON.stringify(r)));

nem0z · Accepted Answer · 2022-07-22 07:53:22Z

0

You can try this easy line of code :

const arrayOne = [{  id: '110' }, { id: '202' }, { id: '259' }];

const arrayTwo = [{ data: [{ value: 'Alpha', id: '001' }], }, { data: [{ value: 'Bravo', id: '202' }] }];       

let result = arrayOne.map(el => {
    let found = arrayTwo.find(f => f.data.at(0)?.id == el.id)?.data.at(0)?.value;
    return { id: el.id, value: found ?? null};
});

console.log(result);

answered Jul 22, 2022 at 7:53

nem0z

1,1371 gold badge7 silver badges23 bronze badges

Collectives™ on Stack Overflow

Compare one array with a nested array and push value into a new array with same index in Javascript

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related