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

Ensure that each of the two divs maintains a 16:9 aspect ratio, and utilize one div to fill any remaining empty space through the

Discover the outcome of clicking on an object (mock tests)

Tips for handling the final row of a CSV file in Node.js with fast-csv before the 'end' event is triggered

JavaScript: void(0), Internet Explorer 6, and SWFAddress are all important components

convert and transform XML data into JSON format

When properties are passed and then mapped, they become undefined

DataGrid Component: Implementing a Button for Deleting Rows

A regular expression in Javascript that can be used to identify at least one word starting with a number among multiple words, with a

Leverage the generic types of an extended interface to simplify the creation of a shorthand type

How can a function in one React component be invoked from another component?

Updating votes on the client side in WebForms can be achieved by following these steps

Designing unique variations using Material UI

What is the best way to incorporate this code snippet into an object's value?

The issue with AngularJS Factory values not updating across multiple views

What is the reason for Vue not updating the component after the Pinia state is modified (when deleting an object from an Array)?

Disposing of memory in THREE JS when switching between routes in VUE

Angular does not select the variable_name within the $scope

What is the best way to apply changes to every class in JavaScript?

Issue with Mouse Hover not functioning properly across various 3D objects

express-validator never accepts valid input