Combining and restructuring multidimensional arrays in Javascript: A step-by-step guide

Question

Combining and restructuring multidimensional arrays in Javascript: A step-by-step guide

I'm struggling with transforming a multidimensional array in JavaScript. Here is an example of the input array:

[
[['a',1],['b',2],['c',3]],
[['a',4],['d',2],['c',3],['x',5]],
[['a',1],['c',2],['f',3],['x',1],['o',7]]
]

The desired output should look like this:

[
["a",1,4,1],
["b",2,null,null],
["c",3,3,2],
["d",null,2,null],
["x",null,5,1],
["f",null,null,3],
["o",null,null,7]]
]

Basically, I need to merge parts of the array based on the first element and fill any gaps with "null". For instance, the pair with "x" has values 5 and 1 in the second and third rows, so it should be ["x",null,5,1].
Every line represents charting data series after optimization, and maintaining the correct position of values is crucial.

Currently, I have managed to format the data as expected but I'm struggling to add the "null" values in the correct positions.

Below is my code:

var cubes = [
        [['a',1],['b',2],['c',3]],
        [['a',4],['d',2],['c',3],['x',5]],
        [['a',1],['c',2],['f',3],['x',1],['o',7]]
        ];
var out = [];
for (var i=0; i<cubes.length; i++) {
    for (var j=0; j<cubes[i].length; j++) {
        out.push(cubes[i][j]);
        for (var x=0; x<out.length-1; x++) {
         if (out[x][0] == cubes[i][j][0]) {
            out[x].push(cubes[i][j][1]);
            out.pop();
         }
        }
    }
}
console.log(out);

This code gives me the following output:

[
["a",1,4,1],
["b",2],
["c",3,3,2],
["d",2],
["x",5,1],
["f",3],
["o",7]
]

Moreover, I have a hunch that there might be a simpler way to achieve this, possibly using map/reduce functions, but my brain seems to be frozen today :/ Any suggestions?

Check out the JSFiddle code here

javascript arrays multidimensional-array

Answer 1

Answer №1

You asked for a simple solution, so here's an illustration of JavaScript's latest shortcuts for array operations:

    var test = [
      [['a',1],['b',2],['c',3]],
      [['a',4],['d',2],['c',3],['x',5]],
      [['a',1],['c',2],['f',3],['x',1],['o',7]]
    ];
    var result = [];
    // The maximum possible value count will be updated
    var max_values = 0;
    
    // Iterate over each row in input
    test.forEach(function(row, index) {// Index is used to properly pad null from right
      //Iterate over each pair of letter and number
      row.forEach(function(cell) {//cell is one of ['x', 0]
        var groupName = cell[0]; //a, b, c ...
        // Find a group in results
        var entry = result.find(function(newRow) {
          return newRow[0] == groupName;
        });
        // If no group was found, create a group and add it to results
        if(!entry) {
            entry = [groupName];
            result.push(entry);
        }
        // Left-pad nulls
        while(entry.length-1<index)
            entry.push(null);
        // Push the value
        var count = entry.push(cell[1]);
        // Update max count number
        max_values = Math.max(max_values, count);
        // Second pass - fill in `null` so that all entries are the same length
    result.forEach(function(row) {
      // Pad until all rows are as long as the longest one
      while(row.length<max_values)
        row.push(null);
    });
    //Debug
    console.log(result);
    document.write("<pre>"+result.join("\n")+"</pre>");

Featuring: .forEach and .find. Note that find is really new and neither find neither forEach appear in older browsers.

I win!

Answer 2

You asked for a simple solution, so here's an illustration of JavaScript's latest shortcuts for array operations:

    var test = [
      [['a',1],['b',2],['c',3]],
      [['a',4],['d',2],['c',3],['x',5]],
      [['a',1],['c',2],['f',3],['x',1],['o',7]]
    ];
    var result = [];
    // The maximum possible value count will be updated
    var max_values = 0;
    
    // Iterate over each row in input
    test.forEach(function(row, index) {// Index is used to properly pad null from right
      //Iterate over each pair of letter and number
      row.forEach(function(cell) {//cell is one of ['x', 0]
        var groupName = cell[0]; //a, b, c ...
        // Find a group in results
        var entry = result.find(function(newRow) {
          return newRow[0] == groupName;
        });
        // If no group was found, create a group and add it to results
        if(!entry) {
            entry = [groupName];
            result.push(entry);
        }
        // Left-pad nulls
        while(entry.length-1<index)
            entry.push(null);
        // Push the value
        var count = entry.push(cell[1]);
        // Update max count number
        max_values = Math.max(max_values, count);
        // Second pass - fill in `null` so that all entries are the same length
    result.forEach(function(row) {
      // Pad until all rows are as long as the longest one
      while(row.length<max_values)
        row.push(null);
    });
    //Debug
    console.log(result);
    document.write("<pre>"+result.join("\n")+"</pre>");

Featuring: .forEach and .find. Note that find is really new and neither find neither forEach appear in older browsers.

I win!

Answer 3

Answer №2

Arranging the main keys is necessary, resulting in a sorted list of final outcomes.

let keys = [];
// Sorting cubes and creating an array of `keys`
cubes.forEach(function(cube){
    cube.sort((a, b) => {
       return a[0] > b[0];
    }).forEach(function(subArr){
        if(keys.indexOf(subArr[0]) === -1 ){
            keys.push(subArr[0]);
        }
    });
});
// Sorting keys
keys.sort();
// Mapping a new array based on sorted cubes and keys
let out = keys.map(function(key, idx){
    let newArr = [key];

    cubes.forEach(function(cube){
        let match = cube.filter(function(subArr){
            return subArr[0] === key;
        });
        newArr.push( match.length ? match[0][1] : null)
    });

    return newArr

});

Output:

[    
    [ "a", 1, 4, 1 ]
    [ "b", 2, null, null ]
    [ "c", 3, 3, 2 ]
    [ "d", null, 2, null ]
    [ "f", null, null, 3 ]
    [ "o", null, null, 7 ]
    [ "x", null, 5, 1 ]    
]

View DEMO

Answer 4

Arranging the main keys is necessary, resulting in a sorted list of final outcomes.

let keys = [];
// Sorting cubes and creating an array of `keys`
cubes.forEach(function(cube){
    cube.sort((a, b) => {
       return a[0] > b[0];
    }).forEach(function(subArr){
        if(keys.indexOf(subArr[0]) === -1 ){
            keys.push(subArr[0]);
        }
    });
});
// Sorting keys
keys.sort();
// Mapping a new array based on sorted cubes and keys
let out = keys.map(function(key, idx){
    let newArr = [key];

    cubes.forEach(function(cube){
        let match = cube.filter(function(subArr){
            return subArr[0] === key;
        });
        newArr.push( match.length ? match[0][1] : null)
    });

    return newArr

});

Output:

[    
    [ "a", 1, 4, 1 ]
    [ "b", 2, null, null ]
    [ "c", 3, 3, 2 ]
    [ "d", null, 2, null ]
    [ "f", null, null, 3 ]
    [ "o", null, null, 7 ]
    [ "x", null, 5, 1 ]    
]

View DEMO

Answer 5

Answer №3

To efficiently organize your arrays by key and create the final result, you can use a temporary object to store the data first.

var index = 0;
var result = [];
var temp = {};
var cubes = [
  [['a',1],['b',2],['c',3]],
  [['a',4],['d',2],['c',3],['x',5]],
  [['a',1],['c',2],['f',3],['x',1],['o',7]]
];

for(var i = 0; i < cubes.length; i++) {
  var row = cubes[i];
  row.forEach(function(item) {
    var name = item[0];
    var value = item[1];
    
    if (!temp[name]) {
      temp[name] = {
        index: index, //store index to maintain order in result
        values: new Array(cubes.length)
      };
      index++;
    }
    
    temp[name]['values'][i] = value;
  });
}

for(var name in temp) {
  var a = [];
  a.push(name);
  for(var i = 0; i < cubes.length; i++) {
    if (temp[name]['values'][i])
      a.push(temp[name]['values'][i]);
    else
      a.push(null);
  }
  result[temp[name].index] = a;
}

console.log(result);

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

Answer 6

To efficiently organize your arrays by key and create the final result, you can use a temporary object to store the data first.

var index = 0;
var result = [];
var temp = {};
var cubes = [
  [['a',1],['b',2],['c',3]],
  [['a',4],['d',2],['c',3],['x',5]],
  [['a',1],['c',2],['f',3],['x',1],['o',7]]
];

for(var i = 0; i < cubes.length; i++) {
  var row = cubes[i];
  row.forEach(function(item) {
    var name = item[0];
    var value = item[1];
    
    if (!temp[name]) {
      temp[name] = {
        index: index, //store index to maintain order in result
        values: new Array(cubes.length)
      };
      index++;
    }
    
    temp[name]['values'][i] = value;
  });
}

for(var name in temp) {
  var a = [];
  a.push(name);
  for(var i = 0; i < cubes.length; i++) {
    if (temp[name]['values'][i])
      a.push(temp[name]['values'][i]);
    else
      a.push(null);
  }
  result[temp[name].index] = a;
}

console.log(result);

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

Combining and restructuring multidimensional arrays in Javascript: A step-by-step guide

Answer №1

I win!

Answer №2

Answer №3

Similar questions

What are the differences between a Chrome app and extension? Is there any other way to access the tabs currently open in your

having trouble transferring the password field in PHP to phpMyAdmin

An uncaught runtime error has occurred: TypeError - subSector.map is not a valid function

Is it possible to retrieve and display an object from an API using its unique ID?

The TypeScript Promise error codes TS2304 and TS2529 are causing confusion among

How to automatically select the first item in a populated dropdown list using Vue JS

Reproducing a table row

Every time I hover, my jQuery code keeps repeating the hover effect

What is the best way to simulate our services for controller testing?

Passing PHP array to JavaScript and selecting random images from the array

Performing a double iteration on a JSON array using nested foreach loops to associate each index with its

Firestore data displaying as null values

Tips for determining the presence of a query string value using JavaScript

Utilizing array_map to swap out spaces among letters

Utilize Javascript to convert centimeters into inches

Issue with JQuery delay functionality not activating correctly upon clicking an <a> tag

What is the process for configuring environmental variables within my client-side code?

The concept of immutability is crucial when utilizing a for-in loop to append an object to an array

Error encountered in my JavaScript file - Unexpected Token < found on line 1 of the loadash.js script

Show data from a Node.js server in its original format within an AngularJS application