Searching an array object inside another array object using JavaScript/AngularJS

Question

Searching an array object inside another array object using JavaScript/AngularJS

Here is my issue:

I am facing a situation where I have two Array objects as follows

var array1 = [{ "id": 1, "name": "potatoe", photo="photo"}, {"id": 2, "name": "budget"}]

var array2 =  [{ "id": 1, "name": "potatoeModified"},{ "id": 3, "name": 
 "UhOhAnotherName"}, {"id": 2, "name": "budget"}]

My goal is to search if the ID object in array1 exists in array 2. If it does, I want to replace the name value. If it doesn't exist, like with id 3, I want to add it.

The expected result would be

[{ "id": 1, "name": "potatoeModified", photo="photo"}, {"id": 2, "name": "budget"},
{ "id": 3, "name": "UhOhAnotherName"}]

I have attempted to achieve this, but each time I end up with a function that has too high of a cyclomatic complexity. I do not want one massive function for this task. I believe the solution is straightforward, yet I seem to be missing something... Thank you :)

javascript angularjs

Answer 1

Answer №1

Here is a solution to try:

var array1 = [{ "id": 1, "name": "potatoe", "photo":"photo"}, {"id": 2, "name": "budget"}];

var array2 =  [{ "id": 1, "name": "potatoeModified"},{ "id": 3, "name": 
 "UhOhAnotherName"}, {"id": 2, "name": "budget"}];

array1.map(function(val,i){
  array2.forEach(function(v){
    if(val.id == v.id){
      val.name = v.name;
    }
    else{
      var found = array1.some(function (el) {
        return el.id === v.id;
      });
      if (!found) { array1.push(v); }
    }
  })
  
  return val;   
});

console.log(array1);

Answer 2

Here is a solution to try:

var array1 = [{ "id": 1, "name": "potatoe", "photo":"photo"}, {"id": 2, "name": "budget"}];

var array2 =  [{ "id": 1, "name": "potatoeModified"},{ "id": 3, "name": 
 "UhOhAnotherName"}, {"id": 2, "name": "budget"}];

array1.map(function(val,i){
  array2.forEach(function(v){
    if(val.id == v.id){
      val.name = v.name;
    }
    else{
      var found = array1.some(function (el) {
        return el.id === v.id;
      });
      if (!found) { array1.push(v); }
    }
  })
  
  return val;   
});

console.log(array1);

Answer 3

Answer №2

To efficiently merge two arrays, you can create temporary objects using the id's as keys to store each item.

Then, iterate through the second array's temporary object and either update the name or add it to the first array based on whether the id key exists in the first temporary object.

var array1 = [{ "id": 1, "name": "potatoe", photo:"photo"}, {"id": 2, "name": "budget"}];
var array2 =  [{ "id": 1, "name": "potatoeModified"},{ "id": 3, "name": 
 "UhOhAnotherName"}, {"id": 2, "name": "budget"}];
 
// Create temporary objects using a helper function below
var tmp_1 = toObj(array1), 
    tmp_2 = toObj(array2);


// Iterate through array 2 temporary object and either adjust name or push to array 1
Object.keys(tmp_2).forEach((key)=>{       
   if(tmp_1[key]){
     // Update name if the same id exists from array one
     tmp_1[key].name = tmp_2[key].name;
   }else{
     // Add to array one when the same id doesn't exist
     array1.push(tmp_2[key]);
   }
});

console.log(array1);
 
// Helper function to avoid code duplication
function toObj(arr){
   return arr.reduce((a,c)=>{
     a[c.id] = c;
     return a;
   },{})
}

There are different approaches like using Array.prototype.find() or nested loops to achieve this, but creating hashmap objects is efficient for merging arrays.

Answer 4

To efficiently merge two arrays, you can create temporary objects using the id's as keys to store each item.

Then, iterate through the second array's temporary object and either update the name or add it to the first array based on whether the id key exists in the first temporary object.

var array1 = [{ "id": 1, "name": "potatoe", photo:"photo"}, {"id": 2, "name": "budget"}];
var array2 =  [{ "id": 1, "name": "potatoeModified"},{ "id": 3, "name": 
 "UhOhAnotherName"}, {"id": 2, "name": "budget"}];
 
// Create temporary objects using a helper function below
var tmp_1 = toObj(array1), 
    tmp_2 = toObj(array2);


// Iterate through array 2 temporary object and either adjust name or push to array 1
Object.keys(tmp_2).forEach((key)=>{       
   if(tmp_1[key]){
     // Update name if the same id exists from array one
     tmp_1[key].name = tmp_2[key].name;
   }else{
     // Add to array one when the same id doesn't exist
     array1.push(tmp_2[key]);
   }
});

console.log(array1);
 
// Helper function to avoid code duplication
function toObj(arr){
   return arr.reduce((a,c)=>{
     a[c.id] = c;
     return a;
   },{})
}

There are different approaches like using Array.prototype.find() or nested loops to achieve this, but creating hashmap objects is efficient for merging arrays.

Searching an array object inside another array object using JavaScript/AngularJS

Answer №1

Answer №2

Similar questions

Issue with the initial selection of <select> element in Internet Explorer

Transform JSON data into HTML format while excluding particular values

How to extract cookie value in a node.js application using socket.io

Invoke cloud functions independently of waiting for a response

What is causing the 'Invalid Hook Call' error to appear in React?

Location of Custom HTML Widget in Django-Dashing

Javascript does not have the capability to interact directly with HTML code

Steer clear of retrieving all the elements from the HTML DOM at once

The integration of Vue JS is not displaying properly in an Electron application

Challenges in achieving two-way data binding with directives, controllers, and services

Using jQuery, you can create and add an element to the page when a user clicks

Tips for safely storing JWT tokens in a react/next.js app:

Is it possible to add items to a JS object that isn't an array?

Encountering unexpected behavior with the .data() method

Which is quicker when utilizing jQuery selectors: selecting by .classname or div.classname?

Combining Two Validation Methods for jQuery Validate Plugin

How can you verify user identity in Firebase when making a call to a cloud function on a

Create a dynamic sitemap for a Laravel website that includes variables in the slugs

Setting the Node environment as an environment variable within the application: a step-by-step guide

Retrieve numerical values in inch format from a given string and output the greater value