Merge two arrays of objects with underscore functions

Question

Merge two arrays of objects with underscore functions

Here are two arrays of objects that I have:

var x = [{id:456, name:'falcon'},
         {id:751, name:'gagarin'},
         {id:56, name:'galileo'}]

var y = [{id:751, weight:6700},
         {id:456, weight:2958},
         {id:56, weight:7200}]

With the help of underscorejs, how can we merge array x with array y to create a new array z which includes the weight property from array y where the id matches:

var z = [{id:456, name:'falcon', weight:2958},
         {id:751, name:'gagarin', weight:6700},
         {id:56, name:'galileo', weight:7200}]

javascript underscore.js

Answer 1

Answer №1

A method using underscore is demonstrated below:

var result = _.map(array, function(item) {
    var data = _.findWhere(anotherArray, { id: item.id });

    return _.extend(item, data);
});

To experiment with this method further: http://jsfiddle.net/b90pyxjq/3/

Answer 2

A method using underscore is demonstrated below:

var result = _.map(array, function(item) {
    var data = _.findWhere(anotherArray, { id: item.id });

    return _.extend(item, data);
});

To experiment with this method further: http://jsfiddle.net/b90pyxjq/3/

Answer 3

Answer №2

To merge objects in list a and list b, you can use the _.map function to map each object, the _.indexBy function to index them, and the _.extend function to create a list of merged objects.

This solution makes use of the Underscore.js library, which can be found at this link.

var a = [
  { id: 456, name: 'sojuz' },
  { id: 751, name: 'sputnik' },
  { id: 56,  name: 'arianne' }
];

var b = [
  { id: 751, weight: 5800 },
  { id: 456, weight: 2659 },
  { id: 56,  weight: 6700 }
];

function mergeLists(listA, listB, idField) {
  var indexA = _.indexBy(a, idField)
  var indexB = _.indexBy(b, idField);

  return _.map(indexA, function(obj, key) {
    return _.extend(obj, indexB[key]);
  });
}

var c = mergeLists(a, b, 'id');

document.body.innerHTML = JSON.stringify(c, null, ' ');

body {
  white-space: pre;
  font-family: monospace;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

Edit

In an updated version of the example above, unnecessary indexing of the a list has been removed for increased efficiency. This revised solution outperforms Aurélien Thieriot's solution by approximately 48% in terms of speed.

For a demonstration, refer to this link.

function mergeLists3(listA, listB, idField) {
  var indexB = _.indexBy(listB, idField);

  return _.map(listA, function(obj, key) {
    return _.extend(obj, indexB[obj[idField]]);
  });
}

Answer 4

To merge objects in list a and list b, you can use the _.map function to map each object, the _.indexBy function to index them, and the _.extend function to create a list of merged objects.

This solution makes use of the Underscore.js library, which can be found at this link.

var a = [
  { id: 456, name: 'sojuz' },
  { id: 751, name: 'sputnik' },
  { id: 56,  name: 'arianne' }
];

var b = [
  { id: 751, weight: 5800 },
  { id: 456, weight: 2659 },
  { id: 56,  weight: 6700 }
];

function mergeLists(listA, listB, idField) {
  var indexA = _.indexBy(a, idField)
  var indexB = _.indexBy(b, idField);

  return _.map(indexA, function(obj, key) {
    return _.extend(obj, indexB[key]);
  });
}

var c = mergeLists(a, b, 'id');

document.body.innerHTML = JSON.stringify(c, null, ' ');

body {
  white-space: pre;
  font-family: monospace;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

Edit

In an updated version of the example above, unnecessary indexing of the a list has been removed for increased efficiency. This revised solution outperforms Aurélien Thieriot's solution by approximately 48% in terms of speed.

For a demonstration, refer to this link.

function mergeLists3(listA, listB, idField) {
  var indexB = _.indexBy(listB, idField);

  return _.map(listA, function(obj, key) {
    return _.extend(obj, indexB[obj[idField]]);
  });
}

Answer 5

Answer №3

This implementation is functional but not efficient:

let finalArray = [];
for(let i = 0; i < firstArray.length; i++) {
   for (let j = 0; j < secondArray.length; j++) {
      if(secondArray[j].id == firstArray[i].id) {
        let newObj = {
          id: firstArray[i].id,
          name: firstArray[i].name,
          weight: secondArray[j].weight
        }
        finalArray.push(newObj);
        break;
      }
   }
}

Although this approach has a time complexity of O(n^2), there are ways to optimize it further.

Answer 6

This implementation is functional but not efficient:

let finalArray = [];
for(let i = 0; i < firstArray.length; i++) {
   for (let j = 0; j < secondArray.length; j++) {
      if(secondArray[j].id == firstArray[i].id) {
        let newObj = {
          id: firstArray[i].id,
          name: firstArray[i].name,
          weight: secondArray[j].weight
        }
        finalArray.push(newObj);
        break;
      }
   }
}

Although this approach has a time complexity of O(n^2), there are ways to optimize it further.

Answer 7

Answer №4

Employ ES6 or utilize polyfilled replacements in ES5 to extract property names without underscores:

a.map(function (aItem) {
    var matched = b.find(function (bItem) {
        if (aItem.id == bItem.id) return true;
    }) || {};

    Object.getOwnPropertyNames(matched).map (function (property) {
        aItem[property] = found[property];
    });
});

Answer 8

Employ ES6 or utilize polyfilled replacements in ES5 to extract property names without underscores:

a.map(function (aItem) {
    var matched = b.find(function (bItem) {
        if (aItem.id == bItem.id) return true;
    }) || {};

    Object.getOwnPropertyNames(matched).map (function (property) {
        aItem[property] = found[property];
    });
});

Merge two arrays of objects with underscore functions

Answer №1

Answer №2

Edit

Answer №3

Answer №4

Similar questions

Tips for handling datetime in angular

Webpack and terser reveal the names of the source files in the compressed output

Updating variable storage in React components

Encountering a 405 error when attempting to send a request through an express route in a Next

Using an AngularJS directive to trigger a function with ng-click

Utilizing JQUERY and AJAX for conditional statements

Load jQuery script after Ajax call has loaded the filter

Adding up the values of an array of objects by month using ReactJS

Sorting the array in MongoDB before slicing it

Importing data from an external file into an array using AngularJS

What is the best way to accurately determine the height and offset values of an element while utilizing ng-repeat?

When implementing AngularJS in a situation where the page layout is created by the user, what is the best

Error: Unable to locate Buffer2

An unconventional web address was created when utilizing window.location.hostname

Is it typical to experience a forced reflow violation and page offset?

Object.assign changes the original array object in place

Why is the JavaScript function loaded through Ajax not running as expected?

Displaying numerous pointers on Google Maps by utilizing PHP arrays that are populated with information extracted from a MySQL database

What is the best way to display HTML using Highlight.js in a Vue component?

Is your preference selecting made a breeze by dragging the input field?