What is the best way to merge several nested arrays in JavaScript?

Question

What is the best way to merge several nested arrays in JavaScript?

In my data, I have 2 sets of nested arrays:

var values = [[100, 87.5, 87.5, 87.5, 100, 100],
[87.5, 100, 100, 100, 87.5, 87.5],
[75, 75, 75, 75, 75, 75],
[50, 50, 50, 62.5, 62.5, 62.5],
[62.5, 62.5, 62.5, 50, 37.5, 50],
[0, 0, 0, 0, 0, 0]];

var date = [["2015", "2004", "2015", "2015", "2015", "2015"],
["2015", "2004", "2015", "2015", "2015", "2015"],
["2015", "2004", "2015", "2015", "2015", "2015"],
["2015", "2004", "2015", "2015", "2015", "2015"],
["2015", "2004", "2015", "2015", "2015", "2015"],
["2015", "2004", "2015", "2015", "2015", "2015"]];

My goal is to combine each array in Values and Date like this:

Extract: [100, 87.5, 87.5, 87.5, 100, 100]
Extract: ["2015", "2004", "2015", "2015", "2015", "2015"]

Then merge them into one combined array as shown below:

[{y: 100, d: 2015},{y: 87.5, d: 2004},{y: 87.5, d: 2015},{y: 87.5, d: 2015},{y: 100, d: 2015},{y: 100, d: 2015}]

An example can be found here: https://jsfiddle.net/zidski/5808pgs4/3/

 var result = values.map(function (n, i) {
            return ({ y: n, d: values[i] });
        });

However, the entire array ends up being added together.

javascript arrays

Answer 1

Answer №1

Make sure to loop through the inner array as well.

var date = [  ["1998", "2002", "1995", "2010", "2013", "2008"],  ["1999", "2003", "1996", "2011", "2014", "2009"],  ["2000", "2004", "1997", "2012", "2015", "2010"],  ["2001", "2005", "1998", "2013", "2016", "2011"],  ["2002", "2006", "1999", "2014", "2017", "2012"],  ["2003", "2007", "2000", "2015", "2018", "2013"]];

var values = [  [100, 87.5, 87.5, 87.5, 100, 100],  [87.5, 100, 100, 100, 87.5, 87.5],  [75, 75, 75, 75, 75, 75],  [50, 50, 50, 62.5, 62.5, 62.5],  [62.5, 62.5, 62.5, 50, 37.5, 50],  [0, 0, 0, 0, 0, 0]];

var result = values
  // loop through the values array
  .map(function(arr, i1) {
    // loop through the inner array
    // if you only need the first element as in your example, you can remove the first map method and replace `arr` with `values[0]` and `date[i1][i2]`  with `date[0][i2]`
    return arr.map(function(n, i2) {
      // create the necessary array object based on index
      return {
        y: n,
        // retrieve the period from the 2D array date using index
        periods: date[i1][i2]
      }
    });
  });

document.getElementById("data").innerHTML = JSON.stringify(result, null, 3);

<pre id="data"></pre>

Answer 2

Make sure to loop through the inner array as well.

var date = [  ["1998", "2002", "1995", "2010", "2013", "2008"],  ["1999", "2003", "1996", "2011", "2014", "2009"],  ["2000", "2004", "1997", "2012", "2015", "2010"],  ["2001", "2005", "1998", "2013", "2016", "2011"],  ["2002", "2006", "1999", "2014", "2017", "2012"],  ["2003", "2007", "2000", "2015", "2018", "2013"]];

var values = [  [100, 87.5, 87.5, 87.5, 100, 100],  [87.5, 100, 100, 100, 87.5, 87.5],  [75, 75, 75, 75, 75, 75],  [50, 50, 50, 62.5, 62.5, 62.5],  [62.5, 62.5, 62.5, 50, 37.5, 50],  [0, 0, 0, 0, 0, 0]];

var result = values
  // loop through the values array
  .map(function(arr, i1) {
    // loop through the inner array
    // if you only need the first element as in your example, you can remove the first map method and replace `arr` with `values[0]` and `date[i1][i2]`  with `date[0][i2]`
    return arr.map(function(n, i2) {
      // create the necessary array object based on index
      return {
        y: n,
        // retrieve the period from the 2D array date using index
        periods: date[i1][i2]
      }
    });
  });

document.getElementById("data").innerHTML = JSON.stringify(result, null, 3);

<pre id="data"></pre>

Answer 3

Answer №2

One way to organize the values is by using a nested mapping technique.

var data = [[10, 20, 30, 40, 50], [15, 25, 35, 45, 55], [5, 10, 15, 20, 25]],
    labels = [['A', 'B', 'C', 'D', 'E'], ['F', 'G', 'H', 'I', 'J'], ['K', 'L', 'M', 'N', 'O']],
    formattedData = data.map(function (row, i) {
        return row.map(function (value, j) {
            return { label: labels[i][j], number: value };
        });
    });
    
console.log(formattedData);

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

Answer 4

One way to organize the values is by using a nested mapping technique.

var data = [[10, 20, 30, 40, 50], [15, 25, 35, 45, 55], [5, 10, 15, 20, 25]],
    labels = [['A', 'B', 'C', 'D', 'E'], ['F', 'G', 'H', 'I', 'J'], ['K', 'L', 'M', 'N', 'O']],
    formattedData = data.map(function (row, i) {
        return row.map(function (value, j) {
            return { label: labels[i][j], number: value };
        });
    });
    
console.log(formattedData);

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

Answer 5

Answer №3

If you combine both arrays into a single one, the process becomes straightforward (providing that they have equal lengths):

var years = [["2016", "2008", "2013", "2014", "2015", "2017"],
    ["2016", "2010", "2014", "2016", "2015", "2019"],
    ["2016", "2012", "2015", "2016", "2015", "2020"],
    ["2016", "2014", "2015", "2016", "2015", "2021"],
    ["2016", "2016", "2015", "2016", "2015", "2022"],
    ["2016", "2018", "2015", "2016", "2015", "2023"]];
    
    var amounts = [[120, 85.5, 85.5, 85.5, 120, 120],
    [85.5, 120, 120, 120, 85.5, 85.5],
    [70, 70, 70, 70, 70, 70],
    [45, 45, 45, 57.5, 57.5, 57.5],
    [57.5, 57.5, 57.5, 45, 32.5, 45],
    [10, 10, 10, 10, 10, 10]];
    
    var flattenedAmounts = [].concat.apply([], amounts);
    var flattenedYears = [].concat.apply([], years);
    
     var output = flattenedAmounts.map(function (num, index) {
                return ({ value: num, year: flattenedYears[index] });
            });
            
    
    
    document.getElementById("display").innerHTML = JSON.stringify(output);

<pre id="display"></pre>

Answer 6

If you combine both arrays into a single one, the process becomes straightforward (providing that they have equal lengths):

var years = [["2016", "2008", "2013", "2014", "2015", "2017"],
    ["2016", "2010", "2014", "2016", "2015", "2019"],
    ["2016", "2012", "2015", "2016", "2015", "2020"],
    ["2016", "2014", "2015", "2016", "2015", "2021"],
    ["2016", "2016", "2015", "2016", "2015", "2022"],
    ["2016", "2018", "2015", "2016", "2015", "2023"]];
    
    var amounts = [[120, 85.5, 85.5, 85.5, 120, 120],
    [85.5, 120, 120, 120, 85.5, 85.5],
    [70, 70, 70, 70, 70, 70],
    [45, 45, 45, 57.5, 57.5, 57.5],
    [57.5, 57.5, 57.5, 45, 32.5, 45],
    [10, 10, 10, 10, 10, 10]];
    
    var flattenedAmounts = [].concat.apply([], amounts);
    var flattenedYears = [].concat.apply([], years);
    
     var output = flattenedAmounts.map(function (num, index) {
                return ({ value: num, year: flattenedYears[index] });
            });
            
    
    
    document.getElementById("display").innerHTML = JSON.stringify(output);

<pre id="display"></pre>

Answer 7

Answer №4

Perhaps what you are looking for can be achieved with the following code snippet:

// By using concat, we flatten the arrays.
var result = [].concat.apply([],dates.map(function (subDates, i) {
      // Iterate through the sub dates
      return subDates.map(function(date, j){
         // Create the object
         return { y: date, periods: values[i][j] };

     })
 }));

console.log(result);

// Expected Output:
//[{"y":"2015","periods":100},{"y":"2004","periods":87.5},{"y":"2015","periods":87.5},{"y":"2015","periods":87.5},{"y":"2015","periods":100},...]

Answer 8

Perhaps what you are looking for can be achieved with the following code snippet:

// By using concat, we flatten the arrays.
var result = [].concat.apply([],dates.map(function (subDates, i) {
      // Iterate through the sub dates
      return subDates.map(function(date, j){
         // Create the object
         return { y: date, periods: values[i][j] };

     })
 }));

console.log(result);

// Expected Output:
//[{"y":"2015","periods":100},{"y":"2004","periods":87.5},{"y":"2015","periods":87.5},{"y":"2015","periods":87.5},{"y":"2015","periods":100},...]

Answer 9

Answer №5

To effectively process the data, it may be necessary to perform mapping twice.

var resultData = date.map(function(item,indexDate){
  return item.map(function(year, indexYear){
     return {y:year,d:values[indexDate][indexYear]};
   }); 
});

Another option is to flatten the array. Here is an example on a plunkr for reference.

Answer 10

To effectively process the data, it may be necessary to perform mapping twice.

var resultData = date.map(function(item,indexDate){
  return item.map(function(year, indexYear){
     return {y:year,d:values[indexDate][indexYear]};
   }); 
});

Another option is to flatten the array. Here is an example on a plunkr for reference.

What is the best way to merge several nested arrays in JavaScript?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

How to dynamically increase vote tallies with React.js

Unable to utilize console.log and alert functions within the Next.js application

Exploring Vue's feature of passing props and emitting events within nested components

VueJS - Create a dynamic timer using setInterval function

What is the best way to incorporate a jQuery progress bar into a slideshow gallery?

Issue with playing audio file using HowlerJS

Filter Vue JS search results using an array of checkboxes

Understanding the Execution of Asynchronous Code

What is the best way to notify an XML file using jQuery?

WebStorm displays all imported items as unused in a TypeScript backend project

Display JSON information within a Bootstrap modal

An error occurred while trying to convert a circular data structure to JSON during an API request within another

Accessing the window variable within a Jquery selector in Javascript

The error function is consistently triggered when making an Ajax POST request, even though using cURL to access the same

Transferring information using pure JavaScript AJAX and retrieving it through a Node API

Activation of navigation buttons in the Vue Full Calendar control the movement to the next and previous

Older browser compatibility for Flexbox flex-flow alternative

Locate a specific text within a complex array of objects and retrieve the objects that contain the match as

Mastering the art of grouping by a key and generating sub-objects from a plain array of key-value pairs in JavaScript ES5 without relying on third-party libraries

What is the process for changing the background color with Angular?