What is the best way to combine two nearly identical arrays/objects using underscorejs or a similar library?

Question

What is the best way to combine two nearly identical arrays/objects using underscorejs or a similar library?

In the realm of lists, there exists an old list and a new one. The mission at hand is to combine both, even in the presence of newly added key-value pairs.

var oldList = [{
  id: 1,
  name: 'Michael',
  sex: 'male',
  goodlooking: 1
}, {
  id: 2,
  name: 'John',
  sex: 'male'
}, {
  id: 3,
  name: 'Laura',
  sex: 'female'
}];

AND...

var newList = [{
  id: 1,
  name: 'Cindy',
  sex: 'female'
}, {
  id: 2,
  name: 'Herry',
  sex: 'male'
}, {
  id: 3,
  name: 'Laura',
  sex: 'female',
  goodlooking: 1
}];

The challenge now lies in merging these two lists together to harness the best of both by substituting values for matching keys. As a result, the merged list will manifest as follows:

var mergedList = [{
  id: 1,
  name: 'Cindy',
  sex: 'female',
  goodlooking: 1
}, {
  id: 2,
  name: 'Herry',
  sex: 'male'
}, {
  id: 3,
  name: 'Laura',
  sex: 'female',
  goodlooking: 1
}];

Behold the transformations unfolding before us - Michael underwent a name and gender metamorphosis, while upholding his status of being "goodlooking." John transcended into Henry, and Laura unearthed her newfound inner beauty.

javascript arrays object underscore.js

Answer 1

Answer №1

const combinedList = _.map(previousList, function (prevElement) {
    const newElement = _.find(updatedList, {id: prevElement.id});
    return _.merge(prevElement, newElement);
});

Answer 2

const combinedList = _.map(previousList, function (prevElement) {
    const newElement = _.find(updatedList, {id: prevElement.id});
    return _.merge(prevElement, newElement);
});

Answer 3

Answer №2

Here is a solution using plain Javascript:

const oldData = [{ id: 1, name: 'Michael', gender: 'male', age: 25 }, { id: 2, name: 'John', gender: 'male' }, { id: 3, name: 'Laura', gender: 'female' }],
    newData = [{ id: 1, name: 'Cindy', gender: 'female' }, { id: 2, name: 'Harry', gender: 'male' }, { id: 3, name: 'Laura', gender: 'female', age: 22 }],
    updatedList = JSON.parse(JSON.stringify(oldData)); // create a copy

newData.forEach(function (item) {
    updatedList.some(function (data) {
        if (item.id === data.id) {
            Object.keys(item).forEach(function (key) {
                data[key] = item[key];
            });
            return true;
        }
    });
});
document.write('<pre>' + JSON.stringify(updatedList, 0, 4) + '</pre>');

Answer 4

Here is a solution using plain Javascript:

const oldData = [{ id: 1, name: 'Michael', gender: 'male', age: 25 }, { id: 2, name: 'John', gender: 'male' }, { id: 3, name: 'Laura', gender: 'female' }],
    newData = [{ id: 1, name: 'Cindy', gender: 'female' }, { id: 2, name: 'Harry', gender: 'male' }, { id: 3, name: 'Laura', gender: 'female', age: 22 }],
    updatedList = JSON.parse(JSON.stringify(oldData)); // create a copy

newData.forEach(function (item) {
    updatedList.some(function (data) {
        if (item.id === data.id) {
            Object.keys(item).forEach(function (key) {
                data[key] = item[key];
            });
            return true;
        }
    });
});
document.write('<pre>' + JSON.stringify(updatedList, 0, 4) + '</pre>');

Answer 5

Answer №3

Perhaps something along these lines?

This code snippet will replace all values in the oldList with corresponding values from the newList, and also add new values if they exist.

mergedList = [];
_.each(oldList, function(listItem, index){
    copy = listItem;
    newValues = _.findWhere(newList, {"id": listItem.id});
    _.each(newValues, function(val,key){
        copy[key] = val;
    });
    mergedList[index] = copy
});

Answer 6

Perhaps something along these lines?

This code snippet will replace all values in the oldList with corresponding values from the newList, and also add new values if they exist.

mergedList = [];
_.each(oldList, function(listItem, index){
    copy = listItem;
    newValues = _.findWhere(newList, {"id": listItem.id});
    _.each(newValues, function(val,key){
        copy[key] = val;
    });
    mergedList[index] = copy
});

Answer 7

Answer №4

Here's a similar example:

let initialLength = prevList.length,
    combinedList = [];
while(initialLength--){
    let oldData = prevList[initialLength];
        updatedKeys = Object.keys(updatedList[initialLength]);
    for (let j=0;j<updatedKeys.length;j++){
        let newKey = updatedKeys[j];
        oldData[newKey] = updatedList[initialLength][newKey]
    }

}

Answer 8

Here's a similar example:

let initialLength = prevList.length,
    combinedList = [];
while(initialLength--){
    let oldData = prevList[initialLength];
        updatedKeys = Object.keys(updatedList[initialLength]);
    for (let j=0;j<updatedKeys.length;j++){
        let newKey = updatedKeys[j];
        oldData[newKey] = updatedList[initialLength][newKey]
    }

}

Answer 9

Answer №5

Utilize lodash's merge function directly.

var combinedArray = _.merge(existingArray, newArray);

This function recursively combines its own enumerable attributes.
https://lodash.com/docs#combine

Answer 10

Utilize lodash's merge function directly.

var combinedArray = _.merge(existingArray, newArray);

This function recursively combines its own enumerable attributes.
https://lodash.com/docs#combine

What is the best way to combine two nearly identical arrays/objects using underscorejs or a similar library?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Blend multiple images using Angular

Displaying and hiding the top menu when the div is scrolled

Selection auto-closing feature

I am looking to fetch information from a different Firestore collection by looping through data using a forEach method within an onSnapshot function

Incorporating timed hover effects in React applications

To dismiss the Div, simply click on any area outside of it. Leveraging the power of SVG, D3

What's the best way to save data from an HTML input field into a JavaScript array?

Attempting to perform recursion on two functions simultaneously may result in one of the functions being undefined

Exploring methods to access specific values from an array containing multiple values using Lodash in Angular 4

What are some ways to postpone the execution of a function in React or NextJs?

A guide on how to retrieve POST form fields in Express

Utilizing the power of JQuery's each() function alongside UI.sortable() for enhanced

Error: React unable to locate module './WebpackMissingModule'

Using ES6 to generate objects within other objects

Learning the art of Javascript programming within the HTML5 realm

What is the best approach to identify duplicated objects within an array?

Utilizing Fragments in Vuejs 2.x with Jsx - A User's Guide

The issue with the autoresize feature in the tinymce plugin arises when trying to delete HTML img content using the backspace

You are unable to move the image to the top of the screen after zooming it with CSS

Changing Page Content with Ajax Post-Redirect Pattern