I use Backbone/lodash for a project, and I wish merge 2 arrays of objects according to a specific value. With this example below, the merge is based on the same value with 2 different key (id and number).

Example

var people = [
    {
        id: "1",
        name: "John"
    },
    {
        id: "2",
        name: "Jane"
    }
];

var data = [
    {
        number: "2",
        role: "Designer"
    },
    {
        number: "1",
        role: "Developer"
    }
];

// Outpout

var merge = [
    {
        id: "1",
        number: "1",
        name: "John",
        role: "Developer"
    },
    {
        id: "2",
        number: "2",
        name: "Jane",
        role: "Designer"
    }
];

I use Backbone/lodash for a project, and I wish merge 2 arrays of objects according to a specific value. With this example below, the merge is based on the same value with 2 different key (id and number).

Example

var people = [
    {
        id: "1",
        name: "John"
    },
    {
        id: "2",
        name: "Jane"
    }
];

var data = [
    {
        number: "2",
        role: "Designer"
    },
    {
        number: "1",
        role: "Developer"
    }
];

// Outpout

var merge = [
    {
        id: "1",
        number: "1",
        name: "John",
        role: "Developer"
    },
    {
        id: "2",
        number: "2",
        name: "Jane",
        role: "Designer"
    }
];

• javascript
• underscore.js
• lodash

4 Answers 4

_.map(people, function(p){
    return _.merge(
        p, 
        _.find(data, {number: p.id})
    )
})

I'm not aware of a lodash function that fulfills exactly this use case. However, your goal can be achieved with plain JavaScript and the lodash helpers _.assign() and _.values() pretty well:

var people = [{id: "1", name: "John"}, {id: "2", name: "Jane"}];
var data = [{number: "2", role: "Designer"}, {number: "1", role: "Developer"}];

var resultObj = {};

people.forEach(function(item) {
  resultObj[item.id] = item;
});
data.forEach(function(item) {
  resultObj[item.number] = _.assign({}, resultObj[item.number], item);
});

var result = _.values(resultObj);
console.log(result);

<script src='https://cdn.jsdelivr/lodash/4.17.1/lodash.min.js'></script>

• Sort arrays by joining values.

• zipWith to zip the arrays together.

• defaults to merge each object iterated.

var people = [
    {id: "1", name: "John"},
    {id: "2", name: "Jane"}
];

var data = [
    {number: "2", role: "Designer"},
    {number: "1", role: "Developer"}
];

var result = _.zipWith(
  _.sortBy(people, person => person.id), 
  _.sortBy(data, dataItem => dataItem.number), 
  (person, dataItem) => _.defaults(person, dataItem)
);

console.log(result)

<script src="https://cdnjs.cloudflare./ajax/libs/lodash.js/4.17.1/lodash.min.js"></script>

You can JavaScript to iterate over all your data with Array#map() and do a Array#find() to set all the p object properties where p.id === d.number:

var people = [{id: "1",name: "John"}, {id: "2",name: "Jane"}],
    data = [{number: "2",role: "Designer"}, {number: "1",role: "Developer"}],
    merge = data.map(d => {
      var p = people.find(p => p.id === d.number);
      p.number = d.number;
      p.role = d.role;

      return p;
    });

// Outpout
console.log(merge);

.as-console-wrapper { max-height: 100% !important; top: 0; }