CODEWITHSUNDEEP
javascriptarraysmapping
Chew Kah Meng
Chew Kah Meng

Reputation: 227

How to map an array of strings to a multidimensional array

I am trying to create a multidimensional array by mapping an array of strings to a 2D array.

var dataFieldArray = ["LegPenetration", "Temperature"];

var multidimensionalArray = [[{"x": 0, "y": 0}, {"x": 10, "y": 20}, {"x": 20, "y": 30}, {"x": 30, "y": 40}, {"x": 40, "y": 50}], 
[{"x": 0, "y": 0}, {"x": 10, "y": 200}, {"x": 20, "y": 250}, {"x": 30, "y": 400}, {"x": 40, "y": 450}]]

The expected output should be as follows:

var data = [[{"field": LegPenetration, "x": 0, "y": 0}, {"field": LegPenetration, "x": 10, "y": 20}, {"field": LegPenetration, "x": 20, "y": 30}, {"field": LegPenetration, "x": 30, "y": 40}, {"field": LegPenetration, "x": 40, "y": 50}], 
[{"field": Temperature, "x": 0, "y": 0}, {"field": Temperature, "x": 10, "y": 200}, {"field": Temperature, "x": 20, "y": 250}, {"field": Temperature, "x": 30, "y": 400}, {"field": Temperature, "x": 40, "y": 450}]]

In the code below, I have mapped xValueArray and yValueArray together to get the resulting 2D array as shown above. I have tried mapping the dataField array the same way but to no avail. Any help is greatly appreciated!

const yValueArray = [[0, 20, 30, 40, 50], [0, 200, 250, 400, 450]];
const xValueArray = [0, 10, 20, 30, 40];

const data = yValueArray.map(data =>
  data.map((d, i) => ({
    x: xValueArray[i],
    y: d
  }))
);

Upvotes: 0

Views: 1059

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1075625

It sounds like you want to add a field property. Here's a way to do that that doesn't modify the original objects using only ES5-level language features and Object.assign (which is ES2015, but polyfillable):

var result = multidimensionalArray.map(function(array, index) {
    var field = dataFieldArray[index];
    return array.map(function(object) {
        return Object.assign({}, object, {field: field});
    });
});

Live Example:

var dataFieldArray = ["LegPenetration", "Temperature"];

var multidimensionalArray = [[{"x": 0, "y": 0}, {"x": 10, "y": 20}, {"x": 20, "y": 30}, {"x": 30, "y": 40}, {"x": 40, "y": 50}], 
[{"x": 0, "y": 0}, {"x": 10, "y": 200}, {"x": 20, "y": 250}, {"x": 30, "y": 400}, {"x": 40, "y": 450}]];

var result = multidimensionalArray.map(function(array, index) {
    var field = dataFieldArray[index];
    return array.map(function(object) {
        return Object.assign({}, object, {field: field});
    });
});

console.log(result);
.as-console-wrapper {
    max-height: 100% !important;
}

Or with ES2015 and ES2018 features:

const result = multidimensionalArray.map((array, index) =>
    array.map(object => ({...object, field: dataFieldArray[index]}))
);

Live Example:

const dataFieldArray = ["LegPenetration", "Temperature"];

const multidimensionalArray = [[{"x": 0, "y": 0}, {"x": 10, "y": 20}, {"x": 20, "y": 30}, {"x": 30, "y": 40}, {"x": 40, "y": 50}], 
[{"x": 0, "y": 0}, {"x": 10, "y": 200}, {"x": 20, "y": 250}, {"x": 30, "y": 400}, {"x": 40, "y": 450}]];

const result = multidimensionalArray.map((array, index) =>
    array.map(object => ({...object, field: dataFieldArray[index]}))
);

console.log(result);
.as-console-wrapper {
    max-height: 100% !important;
}

Upvotes: 3

Related Questions