In Javascript, you can compare an array with a nested array and then store the values in a new array

Question

In Javascript, you can compare an array with a nested array and then store the values in a new array

Two arrays are at hand

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

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

The task is to generate a new array by comparing arrayOne[idx].id with arrayTwo[idx].data[idx2].id

If there is a match, the new array should contain either the value or the entire matching object.

Using this example, the expected result would be

newArray = ['Bravo', 'Delta', 'Sierra']

My attempts so far include:

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

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

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

javascript arrays multidimensional-array ecmascript-6 nested-loops

Answer 1

Answer №1

Ensure you check all indices, not just the first one:

let found = arrayTwo.find(f => f.data.at(0)?.id == el.id)?.data.at(0)?.value;

If the initial index doesn't match, other indices may still contain the desired values and should not be overlooked.

Simplicity is key here. Create a Set of IDs to search for, then iterate over each .data array element, adding matching objects to the output array.

const arrayOne=[{id:"110"},{id:"202"},{id:"259"}],arrayTwo=[{data:[{value:"Alpha",id:"001"}]},{data:[{value:"Bravo",id:"202"}]},{data:[{value:"Charlie",id:"752"}]},{data:[{value:"Delta","id":"202"},{value:"Sierra","id":"110"}]},{data:[{value:"Echo",id:"937"}]}];

const idsToFind = new Set(arrayOne.map(({ id }) => id));
const output = [];
for (const { data } of arrayTwo) {
  for (const obj of data) {
    if (idsToFind.has(obj.id)) output.push(obj.value);
  }
}
console.log(output);

If you prefer a more concise solution:

const arrayOne=[{id:"110"},{id:"202"},{id:"259"}],arrayTwo=[{data:[{value:"Alpha",id:"001"}]},{data:[{value:"Bravo",id:"202"}]},{data:[{value:"Charlie",id:"752"}]},{data:[{value:"Delta","id":"202"},{value:"Sierra","id":"110"}]},{data:[{value:"Echo","id":"937"}]}];

const idsToFind = new Set(arrayOne.map(({ id }) => id));
const output = arrayTwo
  .flatMap(({ data }) => data.filter(
    obj => idsToFind.has(obj.id)
  ))
  .map(obj => obj.value);
console.log(output);

Answer 2

Ensure you check all indices, not just the first one:

let found = arrayTwo.find(f => f.data.at(0)?.id == el.id)?.data.at(0)?.value;

If the initial index doesn't match, other indices may still contain the desired values and should not be overlooked.

Simplicity is key here. Create a Set of IDs to search for, then iterate over each .data array element, adding matching objects to the output array.

const arrayOne=[{id:"110"},{id:"202"},{id:"259"}],arrayTwo=[{data:[{value:"Alpha",id:"001"}]},{data:[{value:"Bravo",id:"202"}]},{data:[{value:"Charlie",id:"752"}]},{data:[{value:"Delta","id":"202"},{value:"Sierra","id":"110"}]},{data:[{value:"Echo",id:"937"}]}];

const idsToFind = new Set(arrayOne.map(({ id }) => id));
const output = [];
for (const { data } of arrayTwo) {
  for (const obj of data) {
    if (idsToFind.has(obj.id)) output.push(obj.value);
  }
}
console.log(output);

If you prefer a more concise solution:

const arrayOne=[{id:"110"},{id:"202"},{id:"259"}],arrayTwo=[{data:[{value:"Alpha",id:"001"}]},{data:[{value:"Bravo",id:"202"}]},{data:[{value:"Charlie",id:"752"}]},{data:[{value:"Delta","id":"202"},{value:"Sierra","id":"110"}]},{data:[{value:"Echo","id":"937"}]}];

const idsToFind = new Set(arrayOne.map(({ id }) => id));
const output = arrayTwo
  .flatMap(({ data }) => data.filter(
    obj => idsToFind.has(obj.id)
  ))
  .map(obj => obj.value);
console.log(output);

Answer 3

Answer №2

Instead of iterating through the objects inside the array within the data property, we can iterate through the array itself to create an array of arrays. By utilizing flat(), we can consolidate these arrays into a single array containing {value, id} objects. Subsequently, we can search for the id by iterating over this consolidated array.

It is important to note that this approach may introduce duplicate values. To prevent duplicates, one solution is to utilize a Set and spread its unique values into a new array.

An alternative method to avoid duplicates involves implementing a condition in the forEach loop that uses the find() method to check if the value already exists in the output array.

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'}, {value: 'Sierra', id: '259'}]},
 {data: [{value: 'Delta',id: '202'}, {value: 'Sierra', id: '259'}]}
];

const output = [];

arrayTwo
  .map(obj => obj.data)
  .flat()
  .forEach(obj => (arrayOne.find(v => v.id === obj.id) && output.push(obj.value)))
  
console.log('Output:', output)

const uniqueOutput = [...new Set(output)]
console.log('Unique Output:', uniqueOutput)

Answer 4

Instead of iterating through the objects inside the array within the data property, we can iterate through the array itself to create an array of arrays. By utilizing flat(), we can consolidate these arrays into a single array containing {value, id} objects. Subsequently, we can search for the id by iterating over this consolidated array.

It is important to note that this approach may introduce duplicate values. To prevent duplicates, one solution is to utilize a Set and spread its unique values into a new array.

An alternative method to avoid duplicates involves implementing a condition in the forEach loop that uses the find() method to check if the value already exists in the output array.

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'}, {value: 'Sierra', id: '259'}]},
 {data: [{value: 'Delta',id: '202'}, {value: 'Sierra', id: '259'}]}
];

const output = [];

arrayTwo
  .map(obj => obj.data)
  .flat()
  .forEach(obj => (arrayOne.find(v => v.id === obj.id) && output.push(obj.value)))
  
console.log('Output:', output)

const uniqueOutput = [...new Set(output)]
console.log('Unique Output:', uniqueOutput)

In Javascript, you can compare an array with a nested array and then store the values in a new array

Answer №1

Answer №2

Similar questions

What is a superior option to converting to a promise?

What are some effective ways to analyze jQuery and JavaScript using web development tools?

Using JSON to dynamically generate pages in Gatsby programatically

Using AJAX within the $.when function to extract the first character from the returned string

What is the best way to assign table rows to various interfaces in typescript?

Is the file corrupt using node.js?

Adjust the output number in a JavaScript BMI calculator to the nearest whole number when using the

Choose three different images and one corresponding word from a JavaScript array to be displayed individually on the screen in separate div containers

Arrangement of div elements tailored to fit the size of the viewport

Steps to extract an array from a data frame

Remove the initial 15,000 lines from a text file using Node.js

The error "Call to a member function exports() on array" occurs when attempting to use the

Using jQuery to select the next table cell vertically

Converting API data in Angular using rxjs

What is the best way to retrieve data from this array?

Updating Ajax data leads to improved sorting capabilities

What is the best way to interact with a checkbox that has a label using Selenium in Node.js?

When my script is located in the head of the HTML page, I am unable to

When running the command `npm start`, an error message is generated

Converting a Click Event to a Scheduled Event using JavaScript and AJAX