Merge 2 objects in AngularJS based on property value

Question

Merge 2 objects in AngularJS based on property value

I am trying to merge two different object arrays based on their "id" value.

For example, if my first array is:

[
  {
   "id": "75318408571184",
   "component": "textInput",
   "index": 0,
   "label": "Text",
   "description": "description",
   "placeholder": "placeholder",
   },
  {
  "id": "9463537670672",
  "component": "textArea",
  "index": 1,
  "label": "Paragraph",
  "description": "description",
   "placeholder": "placeholder"
  }

and the second one looks like this:

[
  {
   "id": "75318408571184",
   "value": "value1"
   },
  {
  "id": "9463537670672",
  "value": "value2"
  }

I would like the result to be:

 [
  {
   "id": "75318408571184",
   "component": "textInput",
   "index": 0,
   "label": "Text",
   "description": "description",
   "placeholder": "placeholder",
   "value": "value1"
   },
  {
  "id": "9463537670672",
  "component": "textArea",
  "index": 1,
  "label": "Paragraph",
  "description": "description",
   "placeholder": "placeholder",
   "value": "value2"
  }

Is there a more efficient way to achieve this in Angular or JavaScript without iterating through the array?

javascript angularjs

Answer 1

Answer №1

check out this solution:

const mergedArray = firstArray.map(item => {
    const match = secondArray.find(i => item.id === i.id);
    return match ? { ...item, ...match } : item;
});
console.log(mergedArray);

Learn more about Array.prototype.map(), which transforms each element in firstArray using a provided function.

Find out how Object.assign() is used to merge properties from the second object into the item object mentioned in the code snippet above.

Answer 2

check out this solution:

const mergedArray = firstArray.map(item => {
    const match = secondArray.find(i => item.id === i.id);
    return match ? { ...item, ...match } : item;
});
console.log(mergedArray);

Learn more about Array.prototype.map(), which transforms each element in firstArray using a provided function.

Find out how Object.assign() is used to merge properties from the second object into the item object mentioned in the code snippet above.

Answer 3

Answer №2

The responses provided above are excellent. However, if you're interested in exploring additional libraries, I recommend checking out this one: loadash merge

const object = {
  'fruits': ['apple'],
  'vegetables': ['beet']
};

const other = {
 'fruits': ['banana'],
 'vegetables': ['carrot']
};

_.merge(object, other, function(a, b) {
  if (_.isArray(a)) {
    return a.concat(b);
 }
});

// → { 'fruits': ['apple', 'banana'], 'vegetables': ['beet', 'carrot'] }

Answer 4

The responses provided above are excellent. However, if you're interested in exploring additional libraries, I recommend checking out this one: loadash merge

const object = {
  'fruits': ['apple'],
  'vegetables': ['beet']
};

const other = {
 'fruits': ['banana'],
 'vegetables': ['carrot']
};

_.merge(object, other, function(a, b) {
  if (_.isArray(a)) {
    return a.concat(b);
 }
});

// → { 'fruits': ['apple', 'banana'], 'vegetables': ['beet', 'carrot'] }

Answer 5

Answer №3

If you're working with plain Javascript, you have the option to utilize Array.prototype.forEach() and Array.prototype.some()

var obj1 = [{ "id": "75318408571184", "component": "textInput", "index": 0, "label": "Text", "description": "description", "placeholder": "placeholder", }, { "id": "9463537670672", "component": "textArea", "index": 1, "label": "Paragraph", "description": "description", "placeholder": "placeholder" }],
    obj2 = [{ "id": "75318408571184", "value": "value1" }, { "id": "9463537670672", "value": "value2" }];

obj2.forEach(function (a) {
    obj1.some(function (b) {
        if (a.id === b.id) {
            b.value = a.value;
            return true;
        }
    });
});
document.write('<pre>' + JSON.stringify(obj1, 0, 4) + '</pre>');

Alternatively, you could create a hash table temp first and then directly manipulate the items.

var obj1 = [{ "id": "75318408571184", "component": "textInput", "index": 0, "label": "Text", "description": "description", "placeholder": "placeholder", }, { "id": "9463537670672", "component": "textArea", "index": 1, "label": "Paragraph", "description": "description", "placeholder": "placeholder" }],
    obj2 = [{ "id": "75318408571184", "value": "value1" }, { "id": "9463537670672", "value": "value2" }],
    temp = {};

obj1.forEach(function (a, i) {
    temp[a.id] = i;
});
obj2.forEach(function (a) {
    obj1[temp[a.id]].value = a.value;
});
document.write('<pre>' + JSON.stringify(obj1, 0, 4) + '</pre>');

Answer 6

If you're working with plain Javascript, you have the option to utilize Array.prototype.forEach() and Array.prototype.some()

var obj1 = [{ "id": "75318408571184", "component": "textInput", "index": 0, "label": "Text", "description": "description", "placeholder": "placeholder", }, { "id": "9463537670672", "component": "textArea", "index": 1, "label": "Paragraph", "description": "description", "placeholder": "placeholder" }],
    obj2 = [{ "id": "75318408571184", "value": "value1" }, { "id": "9463537670672", "value": "value2" }];

obj2.forEach(function (a) {
    obj1.some(function (b) {
        if (a.id === b.id) {
            b.value = a.value;
            return true;
        }
    });
});
document.write('<pre>' + JSON.stringify(obj1, 0, 4) + '</pre>');

Alternatively, you could create a hash table temp first and then directly manipulate the items.

var obj1 = [{ "id": "75318408571184", "component": "textInput", "index": 0, "label": "Text", "description": "description", "placeholder": "placeholder", }, { "id": "9463537670672", "component": "textArea", "index": 1, "label": "Paragraph", "description": "description", "placeholder": "placeholder" }],
    obj2 = [{ "id": "75318408571184", "value": "value1" }, { "id": "9463537670672", "value": "value2" }],
    temp = {};

obj1.forEach(function (a, i) {
    temp[a.id] = i;
});
obj2.forEach(function (a) {
    obj1[temp[a.id]].value = a.value;
});
document.write('<pre>' + JSON.stringify(obj1, 0, 4) + '</pre>');

Merge 2 objects in AngularJS based on property value

Answer №1

Answer №2

Answer №3

Similar questions

Unable to verify the provided resource: Mailchimp

Convert the existing jQuery function to Angular 9 syntax

Multi selection dropdown feature in Angular failing to populate the options

Navigating back to an Angular page from a non-Angular page using Protractor

The rendering of Markdown does not work properly when using Angular's data-binding feature

Utilizing the React hook useReducer technique

Guide to integrating an interactive map with Symfony: linking a popup marker to a template

How to troubleshoot AJAX sending a null string to an MVC controller

Is "content_scripts" malfunctioning in Chrome version 38 and above?

Utilize and store images based on the individual user's preferences with PlayCanvas

Javascript error: Function not defined

Type in data into the database in real-time

The steps to building a personalized checkbox that includes an indeterminate state

Utilizing Vue to pinpoint the DOM element of another component: Steps for success

How to implement saving TypeScript Map() in Firebase Cloud Functions?

What is the best way to verify the accuracy of my model when it includes an array property?

Tips for accessing array or JSON data with ReactJS

Is there a way to dynamically enhance a JSON child array with additional value?

Having difficulty capturing an error related to an invalid form body in discord.js

What is the best way for me to implement a .config feature to allow for customization of my