Combining two objects of varying sizes using the lodash method

Question

Combining two objects of varying sizes using the lodash method

Is there a way to combine two arrays of objects in a specific pattern like this?

var a = [{id: 1, val: 1},{id: 2, val: 2},{id: 3, val: 3},{id: 4, val: 4},{id: 5, val: 5}];
var b = [{id: 21, val: 21},{id: 22, val: 22},{id: 23, val: 23}]

// The desired result is:
c = [
  {id:1, val: 1},
  {id:21, val: 21},
  {id:2, val: 2},
  {id:22, val: 22},
  {id:3, val: 3},
  {id:23, val: 23},
  {id:4, val: 4},
  {id:5, val: 5}
]

I could write the code myself, but I'm curious if lodash has a built-in method for this.

javascript lodash

Answer 1

Answer №1

To start, you can combine the arrays, then flatten the outcome before using eliminating any missing elements (the zip method introduces them as undefined):

var result = _.compact(_.flatten(_.zip(array1, array2)))

You could also chain these operations:

var result = _(array1)
    .zip(array2)
    .flatten()
    .compact()
    .value()

var array1 = [{id: 1, val: 1},{id: 2, val: 2},{id: 3, val: 3},{id: 4, val: 4},{id: 5, val: 5}];
var array2 = [{id: 21, val: 21},{id: 22, val: 22},{id: 23, val: 23}]

var result = _(array1)
    .zip(array2)
    .flatten()
    .compact()
    .value()
    
document.getElementById('output').textContent = JSON.stringify(result);

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

<pre id="output"></pre>

Answer 2

To start, you can combine the arrays, then flatten the outcome before using eliminating any missing elements (the zip method introduces them as undefined):

var result = _.compact(_.flatten(_.zip(array1, array2)))

You could also chain these operations:

var result = _(array1)
    .zip(array2)
    .flatten()
    .compact()
    .value()

var array1 = [{id: 1, val: 1},{id: 2, val: 2},{id: 3, val: 3},{id: 4, val: 4},{id: 5, val: 5}];
var array2 = [{id: 21, val: 21},{id: 22, val: 22},{id: 23, val: 23}]

var result = _(array1)
    .zip(array2)
    .flatten()
    .compact()
    .value()
    
document.getElementById('output').textContent = JSON.stringify(result);

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

<pre id="output"></pre>

Answer 3

Answer №2

var arrayOne = [{id: 1, val: 1},{id: 2, val: 2},{id: 3, val: 3},{id: 4, val: 4},{id: 5, val: 5}];
var arrayTwo = [{id: 21, val: 21},{id: 22, val: 22},{id: 23, val: 23}];

// Combining two arrays by iterating through the largest one and interleaving elements
var resultArray = _.reduce(arrayOne.length < arrayTwo.length? arrayTwo: arrayOne, function(result, _, index) {
  if(index < arrayOne.length) result.push(arrayOne[index]); // Add element from arrayOne if available
  if(index < arrayTwo.length) result.push(arrayTwo[index]); // Add element from arrayTwo if available
  return result;
}, []);

console.log(resultArray);

<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>

Answer 4

var arrayOne = [{id: 1, val: 1},{id: 2, val: 2},{id: 3, val: 3},{id: 4, val: 4},{id: 5, val: 5}];
var arrayTwo = [{id: 21, val: 21},{id: 22, val: 22},{id: 23, val: 23}];

// Combining two arrays by iterating through the largest one and interleaving elements
var resultArray = _.reduce(arrayOne.length < arrayTwo.length? arrayTwo: arrayOne, function(result, _, index) {
  if(index < arrayOne.length) result.push(arrayOne[index]); // Add element from arrayOne if available
  if(index < arrayTwo.length) result.push(arrayTwo[index]); // Add element from arrayTwo if available
  return result;
}, []);

console.log(resultArray);

<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>

Answer 5

Answer №3

To achieve this in vanilla JavaScript, you can create a function that loops through both arrays up to the minimum length, combines the values, and then appends the remaining elements at the end.

function mergeArrays(array1, array2) {
    var mergedArray = [],
        i = 0,
        minLength = Math.min(array1.length, array2.length);
    while (i < minLength) {
        mergedArray.push(array1[i], array2[i]);
        i++;
    }
    return mergedArray.concat(array1.slice(i), array2.slice(i));
}

var arr1 = [{ id: 1, val: 1 }, { id: 2, val: 2 }, { id: 3, val: 3 }, { id: 4, val: 4 }, { id: 5, val: 5 }],
    arr2 = [{ id: 21, val: 21 }, { id: 22, val: 22 }, { id: 23, val: 23 }];

console.log(mergeArrays(arr1, arr2));

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

Answer 6

To achieve this in vanilla JavaScript, you can create a function that loops through both arrays up to the minimum length, combines the values, and then appends the remaining elements at the end.

function mergeArrays(array1, array2) {
    var mergedArray = [],
        i = 0,
        minLength = Math.min(array1.length, array2.length);
    while (i < minLength) {
        mergedArray.push(array1[i], array2[i]);
        i++;
    }
    return mergedArray.concat(array1.slice(i), array2.slice(i));
}

var arr1 = [{ id: 1, val: 1 }, { id: 2, val: 2 }, { id: 3, val: 3 }, { id: 4, val: 4 }, { id: 5, val: 5 }],
    arr2 = [{ id: 21, val: 21 }, { id: 22, val: 22 }, { id: 23, val: 23 }];

console.log(mergeArrays(arr1, arr2));

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

Answer 7

Answer №4

JavaScript ES5 solution utilizing Math.max() (to determine the larger array size) and Array.prototype.push() functions:

var arr1 = [{id: 1, val: 1},{id: 2, val: 2},{id: 3, val: 3},{id: 4, val: 4},{id: 5, val: 5}],
    arr2 = [{id: 21, val: 21},{id: 22, val: 22},{id: 23, val: 23}],
    maxLength = Math.max(arr1.length, arr2.length), lenArr1 = arr1.length, lenArr2 = arr2.length,
    maxArray = lenArr1 > lenArr2 ? arr1 : arr2;
    resultArr = [];

for (var j = 0; j < maxLength; j++) {
    (j < lenArr1 && j < lenArr2) ? resultArr.push(arr1[j], arr2[j]) : resultArr.push(maxArray[j]);
}

console.log(resultArr);

Answer 8

JavaScript ES5 solution utilizing Math.max() (to determine the larger array size) and Array.prototype.push() functions:

var arr1 = [{id: 1, val: 1},{id: 2, val: 2},{id: 3, val: 3},{id: 4, val: 4},{id: 5, val: 5}],
    arr2 = [{id: 21, val: 21},{id: 22, val: 22},{id: 23, val: 23}],
    maxLength = Math.max(arr1.length, arr2.length), lenArr1 = arr1.length, lenArr2 = arr2.length,
    maxArray = lenArr1 > lenArr2 ? arr1 : arr2;
    resultArr = [];

for (var j = 0; j < maxLength; j++) {
    (j < lenArr1 && j < lenArr2) ? resultArr.push(arr1[j], arr2[j]) : resultArr.push(maxArray[j]);
}

console.log(resultArr);

Combining two objects of varying sizes using the lodash method

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilizing a string as a variable in AngularJS: a step-by-step guide

ng-repeat did not properly listen for changes in the radio box selection

Why is my AngularJS controller receiving 'undefined' data from my service request?

Tips for personalizing the color scheme of Material UI Stepper Step?

The success callback is not triggered when making a JSONP request

The jQuery fadeOut function modifies or erases the window hash

Redirecting with React Router outside of a route component

What is the best way to loop back to the beginning of an array after reaching the last element in JavaScript?

Angular 2: Troubleshooting Issues with Observable Data Display

Understanding Vue.js - encountering the error message "property or method is not defined"

Retrieve the name of the file from a given URL by using JavaScript/jQuery, even when only the directory path is

Submitting jQuery Ajax forms multiple times using the POST method

Updating serialized $_POST array with new key/value pair using jQuery AJAX

Invalid JSON data was returned by the Ajax callback

What happens when the next button is clicked without any items selected?

How to retrieve the index of a click event following an AJAX request using jQuery

Is it feasible to maintain a variable as a reference across views while utilizing ng-view?

Ways to receive JavaScript console error messages to aid in debugging your code

AJAX Scripting: Receiving successful data retrieval

Retrieving the initial element from an array when a certain parameter is left blank