Merging components from two multi-dimensional arrays in JavaScript

Question

Merging components from two multi-dimensional arrays in JavaScript

In my JavaScript code, I am working with two arrays:

"total":[[1370923200000,"66"],[1371009600000,"42"],[1371096000000,"23"]]

"successful":[[1370923200000,"5"],[1371096000000,"2"],[1371182400000,"0"]]

My goal is to merge these two arrays into a single array or object that looks like this:

{date:1370923200000, total:"66", successful:"5"},
{date:1371009600000, total:"42"},
{date:1371096000000, total:"23", successful:"2"},
{date:1371182400000, successful:"0"}

I have attempted various approaches to achieve this by iterating through both arrays, but I'm struggling to find an efficient solution.

javascript arrays object multidimensional-array

Answer 1

Answer №1

Below is the code snippet:

var total = [[1370923200000, "66"],[1371009600000, "42"],[1371096000000, "23"]];
var successful = [[1370923200000, "5"],[1371096000000, "2"],[1371182400000, "0"]];
var combined = {};

for(var i=0; i<total.length; i++){
    combined[total[i][0]] = {date: total[i][0], total: total[i][1]};
}

for(var i=0; i<successful.length; i++){
    if(successful[i][0] in combined){
        combined[successful[i][0]].successful = successful[i][1];
    }
    else{
        combined[successful[i][0]] = {
            date: successful[i][0], successful: successful[i][1]
        };
    }
}

var result = [];
for(var key in combined){
    result.push(combined[key]);
}
alert(result.toSource());

Check out this functional demo http://jsfiddle.net/eRjeZ/

Answer 2

Below is the code snippet:

var total = [[1370923200000, "66"],[1371009600000, "42"],[1371096000000, "23"]];
var successful = [[1370923200000, "5"],[1371096000000, "2"],[1371182400000, "0"]];
var combined = {};

for(var i=0; i<total.length; i++){
    combined[total[i][0]] = {date: total[i][0], total: total[i][1]};
}

for(var i=0; i<successful.length; i++){
    if(successful[i][0] in combined){
        combined[successful[i][0]].successful = successful[i][1];
    }
    else{
        combined[successful[i][0]] = {
            date: successful[i][0], successful: successful[i][1]
        };
    }
}

var result = [];
for(var key in combined){
    result.push(combined[key]);
}
alert(result.toSource());

Check out this functional demo http://jsfiddle.net/eRjeZ/

Answer 3

Answer №2

Here is a straightforward approach for handling n arrays:

var arrays = {"total":[…], "successful":[…]};

var result = [];
for (var prop in arrays) {
    var arr = arrays[prop];
    var i=0;
    for (var j=0; j<arr.length; j++) {
        var date = arr[j][0];
        while (i < result.length && date > result[i].date) i++;
        if (i < result.length && date == result[i].date) {
            result[i][prop] = arr[j][1];
        } else {
            var o = {date:date};
            o[prop] = arr[j][1];
            result.splice(i, 0, o);
        }
    }
}

If you're looking for improved performance, consider implementing the Multiple Array Merge Using Binary Heap technique (also check out Algorithm for N-way merge). For scenarios with just two lists, explore the options presented in Most efficient way to merge two arrays of objects.

Answer 4

Here is a straightforward approach for handling n arrays:

var arrays = {"total":[…], "successful":[…]};

var result = [];
for (var prop in arrays) {
    var arr = arrays[prop];
    var i=0;
    for (var j=0; j<arr.length; j++) {
        var date = arr[j][0];
        while (i < result.length && date > result[i].date) i++;
        if (i < result.length && date == result[i].date) {
            result[i][prop] = arr[j][1];
        } else {
            var o = {date:date};
            o[prop] = arr[j][1];
            result.splice(i, 0, o);
        }
    }
}

If you're looking for improved performance, consider implementing the Multiple Array Merge Using Binary Heap technique (also check out Algorithm for N-way merge). For scenarios with just two lists, explore the options presented in Most efficient way to merge two arrays of objects.

Answer 5

Answer №3

let allData = [[1370923200000, "66"],[1371009600000, "42"],[1371096000000, "23"]];
let successData = [[1370923200000, "5"],[1371096000000, "2"],[1371182400000, "0"]];
let combinedData = {}; 
let finalOutput = [];

allData.map(  function( item ){ addToCombinedData( item , "total" ) } );
successData.map( function( item ){ addToCombinedData( item , "successful" ) } );

console.log( combinedData ); // This resembles the desired output

for( let key in combinedData )
  finalOutput.push( combinedData[key] );

console.log( finalOutput ); // Final result as expected

function addToCombinedData( item , name )
{
  let key = item[0];
  let entry = combinedData[key] || { date : key };
  entry[name] = item[1];
  combinedData[key] = entry; 
}

Answer 6

let allData = [[1370923200000, "66"],[1371009600000, "42"],[1371096000000, "23"]];
let successData = [[1370923200000, "5"],[1371096000000, "2"],[1371182400000, "0"]];
let combinedData = {}; 
let finalOutput = [];

allData.map(  function( item ){ addToCombinedData( item , "total" ) } );
successData.map( function( item ){ addToCombinedData( item , "successful" ) } );

console.log( combinedData ); // This resembles the desired output

for( let key in combinedData )
  finalOutput.push( combinedData[key] );

console.log( finalOutput ); // Final result as expected

function addToCombinedData( item , name )
{
  let key = item[0];
  let entry = combinedData[key] || { date : key };
  entry[name] = item[1];
  combinedData[key] = entry; 
}

Merging components from two multi-dimensional arrays in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

`Is it possible to retrieve numerous downloaded images from formData using Express for recovery purposes?`

The XHR request fails to transmit a JSON object

In configuring the print settings, I specified margins to ensure proper formatting. However, I noticed that the margin adjustment only applies to the first page. I need

Set the value obtained from a resolved promise to a mutable reference object in a React component

Update JavaScript files by utilizing a different JavaScript document

Delete the designated column from the table

Would it be considered safe to make a reference to an array element that is out of bounds if the reference is not used at all?

Struggling with the development of a crossfading image gallery using jQuery's .animate() function while ensuring compatibility with IE8

What is the reason that when a <div> click on a mobile device includes a jQuery ('#item').fadeOut() function, the CSS of the '#item' element maintains its previous hover state

JavaScript code for displaying mouse positions and Geolocation using OpenLayers, along with a Geocodezip demonstration

"Utilize gulp-connect to store the root as an array

Angular router.redirect is not able to pass variables as expected

How to achieve a one-time use of JQuery scrollTo for scrolling to a specific

Delete item from file

a pair of browser windows displaying a web application built with ASP.NET MVC

Slider with Dual Images: A Visual Comparison

ClickAwayListener is preventing the onClick event from being fired within a component that is nested

Modify the UserAgent from IE 11 to IE 9 through programming adjustments

Index similar to JavaScript-Meadow

Remove any actions that a view has linked to the app.vent