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
– Chelli Kapiloff, Commented Dec 16, 2015 at 13:57

madox2 · Accepted Answer · 2015-12-16 14:00:11Z

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, 2015 at 14:00

answered Dec 16, 2015 at 13:48

madox2

52.3k21 gold badges106 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chelli Kapiloff Over a year ago

Thanks, this works! just wondering if this is equally efficient to looping through the arrays ?

madox2 Over a year ago

Yes, map and find functions actually loop through array

Pritam Banerjee · Accepted Answer · 2015-12-16 14:05:08Z

2

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'] }

answered Dec 16, 2015 at 14:05

Pritam Banerjee

19.1k10 gold badges97 silver badges113 bronze badges

Comments

Nina Scholz · Accepted Answer · 2015-12-16 15:29:29Z

2

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

edited Dec 16, 2015 at 15:29

answered Dec 16, 2015 at 13:55

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

2 Comments

Iván Rodríguez Torres Over a year ago

Not very important but you shouldn't use document.write stackoverflow.com/a/802943/2127296

Nina Scholz Over a year ago

@IvanRodriguezTorres, i have read it, but i do not understand the result.

Collectives™ on Stack Overflow

angularjs combine 2 objects by property value

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related