angularjs combine 2 objects by property value

Question

I have 2 different object arrays which i would like to merge according to the "id" value.

So if my first array looks like this:

[
  {
   "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 my second one looks something like this:

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

]

i would like to get this array of objects:

 [
  {
   "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 neat way to do this in angular or javascript without looping through the array?

Since i might be dealing with very large arrays i wanted something a little more efficient .. — Chelli Kapiloff, Dec 16 '15 at 13:57

madox2 · Accepted Answer · 2015-12-16T14:00:11.627

2

try this:

var result = firstArray.map(function(item) {
    var second = secondArray.find(function(i) {
        return item.id === i.id;
    });
    return second ? Object.assign(item, second) : item;
});
console.log(result);

Array.prototype.map() applies function in argument on each item of firstArray and returns new array with modified values.

Object.assign() is function which copies properties of second object to the item object in the code above.

edited Dec 16 '15 at 14:00

answered Dec 16 '15 at 13:48

madox2

39,489
13
88
91

Thanks, this works! just wondering if this is equally efficient to looping through the arrays ? – Chelli Kapiloff Dec 16 '15 at 14:03
Yes, map and find functions actually loop through array – madox2 Dec 16 '15 at 14:05

Nina Scholz · Answer 2 · 2015-12-16T15:29:29.523

In plain Javascript, you can use 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>');

Another possibility is to build a hash table temp first and then manipulate the item directly.

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>');

Not very important but you shouldn't use document.write http://stackoverflow.com/a/802943/2127296 — Iván Rodríguez Torres, Dec 16 '15 at 14:02
@IvanRodriguezTorres, i have read it, but i do not understand the result. — Nina Scholz, Dec 16 '15 at 15:20

score 2 · Answer 3 · answered Dec 16 '15 at 14:05

The above answers are already good. But if you want to look at some other libraries you can have a look at this . loadash merge

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

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

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

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

angularjs combine 2 objects by property value

3 Answers3