Find similarities between two JavaScript arrays using unique identifiers

Question

Find similarities between two JavaScript arrays using unique identifiers

Seeking a more efficient and streamlined approach in javascript to compare two arrays and generate a third one.

We have the following two arrays :

var array1 = [
    [{
    id: 1,
    enabled: false

  }],
  [{
    id: 2,
    enabled: true,
  }],
  [{
    id: 10,
    enabled: false
  }]
]

var array2 = [
    {
    id_from_array1: 10,
    data: true
  },
  {
    id_from_array1: 20,
    data: false
  },
  {
    id_from_array1: 1,
    data: true
  }
]

The goal is to extract IDs from the second array that are not present in the first array. Currently, this is done by creating a third array with nested loops to compare values of the first two arrays :

var array3 = [];

for (var i = 0; i < array2.length; i++) {
  for (var y = 0; y < array1.length; y++) {
      if (array2[i].id_from_array1 === array1[y][0].id) {
        array3.push(array2[i])
    }
  }
}

Link to working fiddle

Is there a more optimal solution to this problem?

Thank you!

javascript arrays

Answer 1

Answer №1

Generate a list of unique id values from array1 and then utilize .filter to extract elements from array2 based on these ids;

var ids = array1.map( el => el[0].id );
ids = Array.from(new Set(ids)); // Extract unique ids using set
var array3 = array2.filter( el => ids.indexOf(el.id_from_array1)!==-1);
console.log(array3);

var array1 = [
    [{
    id: 1,
    enabled: false

  }],
  [{
    id: 2,
    enabled: true,
  }],
  [{
    id: 10,
    enabled: false
  }]
]

var array2 = [
    {
    id_from_array1: 10,
    data: true
  },
  {
    id_from_array1: 20,
    data: false
  },
  {
    id_from_array1: 1,
    data: true
  }
];

var ids = array1.map( el => el[0].id );
var array3 = array2.filter( el => ids.indexOf(el.id_from_array1)!==-1);
console.log(array3);

Answer 2

Generate a list of unique id values from array1 and then utilize .filter to extract elements from array2 based on these ids;

var ids = array1.map( el => el[0].id );
ids = Array.from(new Set(ids)); // Extract unique ids using set
var array3 = array2.filter( el => ids.indexOf(el.id_from_array1)!==-1);
console.log(array3);

var array1 = [
    [{
    id: 1,
    enabled: false

  }],
  [{
    id: 2,
    enabled: true,
  }],
  [{
    id: 10,
    enabled: false
  }]
]

var array2 = [
    {
    id_from_array1: 10,
    data: true
  },
  {
    id_from_array1: 20,
    data: false
  },
  {
    id_from_array1: 1,
    data: true
  }
];

var ids = array1.map( el => el[0].id );
var array3 = array2.filter( el => ids.indexOf(el.id_from_array1)!==-1);
console.log(array3);

Answer 3

Answer №2

To locate elements, you can utilize the find method in this way:

let newArray = [];
arrayA.find(function(itemA) {
  let match = arrayB.find(function(itemB) {
    return itemB[0].id === itemA.id_from_arrayA;
  });
  if (match !== null) {
    newArray.push(match);
  }
});

Answer 4

To locate elements, you can utilize the find method in this way:

let newArray = [];
arrayA.find(function(itemA) {
  let match = arrayB.find(function(itemB) {
    return itemB[0].id === itemA.id_from_arrayA;
  });
  if (match !== null) {
    newArray.push(match);
  }
});

Find similarities between two JavaScript arrays using unique identifiers

Answer №1

Answer №2

Similar questions

The number input component that is meant to be reusable is experiencing functionality issues within the NUXT framework

How can I programmatically refresh a recursive ng-include in AngularJS?

Implementing context menus on the Material-UI DataGrid is a straightforward process that can enhance the user experience

Is there a way to navigate to the next or previous image in a lightbox by using ev.target.nextElementSibling or ev.target.prevElementSibling?

What methods do publications use to manage HTML5 banner advertisements?

Issue with React ChartJS rendering – Title not visibleWhen using React Chart

What is the best way to assign a unique color to each circle?

What could be the reason for the lack of rendering in this imported React component using System.import?

I need assistance with an issue on my Google Dev Console, as it keeps showing an error stating that ".getcontext is

Struggling to send an array through Ajax to Django view?

Refresh the datatable using updated aaData

Finding the solution to a variable in a Linq Query using c#

What is the best way to use jQuery to fill a dropdown menu with options from a JSON object?

Issues with implementing Rails 4 with jQuery, javascript, and coffee scripts causing functionality to malfunction

altering the directory for bower installations on specific repositories exclusively

Intermittent issue with Webdriver executeScript failing to detect dynamically created elements

Tips for incorporating external routes into the routes index file

Issues with JavaScript PHP Ajax request

Ways to display jQuery values as HTML text

loading dynamic content into an appended div in HTML using Angular