Locate all elements in an array that contain a particular value for a specific key using Javascript

Question

Locate all elements in an array that contain a particular value for a specific key using Javascript

In my JavaScript data, I have two arrays:

ARRAY ONE:
[ TextRow { v_id: 3000 },
  TextRow { v_id: 3001 },
  TextRow { v_id: 3002 } ]

ARRAY TWO:
[ TextRow {
      s_id: 'S001',
      v_id: 3000,
      type: 'control' },
  TextRow {
      s_id: 'S002',
      v_id: 3001,
      type: 'mut' },
  TextRow {
      s_id: 'S003',
      v_id: 3001,
      type: 'mut' },
  TextRow {
      s_id: 'S005',
      v_id: 3001,
      type: 'control' },
  TextRow {
      s_id: 'S008',
      v_id: 3002,
      type: 'mut' } ]

I am looking for a way to match elements in Array One with related elements in Array Two. Specifically, I want to create new arrays in which each element from Array One corresponds to all elements from Array Two that share the same v_id value. For instance, if v_id = 3001 in Array One, I aim to collect all matching elements from Array Two where v_id equals 3001 into a separate array. However, I need help determining the most efficient approach for this task and whether there are built-in JavaScript functions that can streamline the process. Given the substantial size of my Array Two, consisting of over 1000 elements, I seek a solution that avoids simply iterating through elements using nested loops. Any suggestions or insights on optimizing this operation would be greatly appreciated.

javascript arrays

Answer 1

Answer №1

To find the matching elements, you can utilize a combination of .forEach (or .map) on ARRAY_ONE and then a .filter on ARRAY_TWO.

A getMatches function has been included to enhance the clarity of the operation.

const ARRAY_ONE =
[  { id: 1000 },
   { id: 1001 },
   { id: 1002 } ];

const ARRAY_TWO =
[ {
      identifier: 'ID001',
      id: 1000,
      type: 'option' },
   {
      identifier: 'ID002',
      id: 1001,
      type: 'choice' },
   {
      identifier: 'ID003',
      id: 1001,
      type: 'choice' },
   {
      identifier: 'ID005',
      id: 1001,
      type: 'option' },
   {
      identifier: 'ID008',
      id: 1002,
      type: 'combination' } ];
      
function getMatches(id, array) {
    return array.filter(element => element.id === id);
}

const result = ARRAY_ONE.map(item => { 
    return { array_one_identifier: item.id, matches_found: getMatches(item.id, ARRAY_TWO) };
});

console.log("Final Output:", result);

Answer 2

To find the matching elements, you can utilize a combination of .forEach (or .map) on ARRAY_ONE and then a .filter on ARRAY_TWO.

A getMatches function has been included to enhance the clarity of the operation.

const ARRAY_ONE =
[  { id: 1000 },
   { id: 1001 },
   { id: 1002 } ];

const ARRAY_TWO =
[ {
      identifier: 'ID001',
      id: 1000,
      type: 'option' },
   {
      identifier: 'ID002',
      id: 1001,
      type: 'choice' },
   {
      identifier: 'ID003',
      id: 1001,
      type: 'choice' },
   {
      identifier: 'ID005',
      id: 1001,
      type: 'option' },
   {
      identifier: 'ID008',
      id: 1002,
      type: 'combination' } ];
      
function getMatches(id, array) {
    return array.filter(element => element.id === id);
}

const result = ARRAY_ONE.map(item => { 
    return { array_one_identifier: item.id, matches_found: getMatches(item.id, ARRAY_TWO) };
});

console.log("Final Output:", result);

Answer 3

Answer №2

To iterate through the initial array, utilize the .forEach( ) function.

Next, apply the .filter( ) method to the second array within the forEach loop as a callback function.

Your code may look something like this:

firstArray.forEach(item1 => secondArray.filter(item2 => item1.id == item2.id ) )

Answer 4

To iterate through the initial array, utilize the .forEach( ) function.

Next, apply the .filter( ) method to the second array within the forEach loop as a callback function.

Your code may look something like this:

firstArray.forEach(item1 => secondArray.filter(item2 => item1.id == item2.id ) )

Answer 5

Answer №3

If you are looking to filter without grouping:

const firstArray =
[  { v_id: 3000 },
   { v_id: 3001 },
   { v_id: 3002 }
];

const secondArray =
[  {
      s_id: 'S001', v_id: 3000, type: 'control' },
   {
      s_id: 'S002', v_id: 3001, type: 'mut' },
   {
      s_id: 'S003', v_id: 3001, type: 'mut' },
   {
      s_id: 'S005', v_id: 3001, type: 'control' },
   {
      s_id: 'S008', v_id: 3002, type: 'mut' }
];    

const result = secondArray.filter(f=>
    firstArray.some(s=> s.v_id == f.v_id));

console.log(result);

To group items by key, you can utilize the reduce method:

const firstArray =
[  { v_id: 3000 },
   { v_id: 3001 },
   { v_id: 3002 }
];

const secondArray =
[  {
      s_id: 'S001', v_id: 3000, type: 'control' },
   {
      s_id: 'S002', v_id: 3001, type: 'mut' },
   {
      s_id: 'S003', v_id: 3001, type: 'mut' },
   {
      s_id: 'S005', v_id: 3001, type: 'control' },
   {
      s_id: 'S008', v_id: 3002, type: 'mut' }
];    

const keys = firstArray.reduce((a, {v_id}) => {
a[v_id] = a[v_id]  || 1;
return a;
}, {});

const allKeys = secondArray.reduce((a, {s_id, v_id, type}) => {
a[v_id] = a[v_id] || {values: []};
a[v_id].values.push({s_id, v_id, type});
return a;
}, {})

Object.keys(allKeys).forEach(k=>{
if( !keys.hasOwnProperty(k))
    delete allKeys[k];
})

console.log(allKeys);

Answer 6

If you are looking to filter without grouping:

const firstArray =
[  { v_id: 3000 },
   { v_id: 3001 },
   { v_id: 3002 }
];

const secondArray =
[  {
      s_id: 'S001', v_id: 3000, type: 'control' },
   {
      s_id: 'S002', v_id: 3001, type: 'mut' },
   {
      s_id: 'S003', v_id: 3001, type: 'mut' },
   {
      s_id: 'S005', v_id: 3001, type: 'control' },
   {
      s_id: 'S008', v_id: 3002, type: 'mut' }
];    

const result = secondArray.filter(f=>
    firstArray.some(s=> s.v_id == f.v_id));

console.log(result);

To group items by key, you can utilize the reduce method:

const firstArray =
[  { v_id: 3000 },
   { v_id: 3001 },
   { v_id: 3002 }
];

const secondArray =
[  {
      s_id: 'S001', v_id: 3000, type: 'control' },
   {
      s_id: 'S002', v_id: 3001, type: 'mut' },
   {
      s_id: 'S003', v_id: 3001, type: 'mut' },
   {
      s_id: 'S005', v_id: 3001, type: 'control' },
   {
      s_id: 'S008', v_id: 3002, type: 'mut' }
];    

const keys = firstArray.reduce((a, {v_id}) => {
a[v_id] = a[v_id]  || 1;
return a;
}, {});

const allKeys = secondArray.reduce((a, {s_id, v_id, type}) => {
a[v_id] = a[v_id] || {values: []};
a[v_id].values.push({s_id, v_id, type});
return a;
}, {})

Object.keys(allKeys).forEach(k=>{
if( !keys.hasOwnProperty(k))
    delete allKeys[k];
})

console.log(allKeys);

Locate all elements in an array that contain a particular value for a specific key using Javascript

Answer №1

Answer №2

Answer №3

Similar questions

Inheritance from WebElement in WebdriverIO: A Beginner's Guide

NodeJS function does not pause for the PostgreSQL database call despite using await keyword

DreamFactory's REST API POST request for rest/user/session consistently encounters errors in Internet Explorer 9

Tips for utilizing setState to display specific information fetched from an API call through the mapping method

Is there a way to determine if a specific key value exists within an array using PHP?

VueJS not refreshing DOM after AJAX data modification

Enabling or disabling select input based on the selected option in a previous select dropdown

Using PHP to enhance a select statement to return data when paired with JavaScript

Click on the submenu to expand it, then simply select the desired option to navigate

submit the data to the database

Datatables fails to execute page transitions

Ensure that the footer remains at the bottom of the page without being fixed to the bottom

Deleting array values by their keys in ActionScript

What is the best way to invoke a Service from a Directive in AngularJS?

Is it possible for a memory leak to occur when a jQuery object is created within a function but never actually used?

Function generator within a component

The Ladda spin animation continues spinning for an additional second after the stop() function is called

Issue encountered while trying to define a global variable within a JavaScript Class

Creating an Active Link in Bootstrap 5.0 (Beta 3) Navbar Using JavaScript

Unable to display Bootstrap 5 modal