Create array data structure from nested object of arrays in JS

Question

I have a data structure as follows:

UPDATED: to have more than one object in innerValues

 const data = {
  "dates": [
    "2015-09-09T00:00:00",
    "2015-09-09T00:10:00",
    "2015-09-09T00:20:00",
  ],
  "innerValues": [
    {
    "name": "Name_1",
    "value": [
      104,
      105,
      107,
    ]
  },
  {
    "name": "Name_2",
    "value": [
      656,
      777,
      145,
    ]
  }],
}

I would like to create an output like:

const outPut = [
   ["2015-09-09T00:00:00", 'Name_1', 104 ],
   ["2015-09-09T00:10:00", 'Name_1', 105 ],
   ["2015-09-09T00:20:00", 'Name_1', 107 ],
   ["2015-09-09T00:00:00", 'Name_2', 104 ],
   ["2015-09-09T00:10:00", 'Name_2', 105 ],
   ["2015-09-09T00:20:00", 'Name_2', 107 ]
]

So far I have this, I know I could do this with forEach etc also - but as an example.

const m = data.dates;
let arr = [];

for (var i = 0; i < m.length; i++) {
  arr[i] = new Array(m[i]);
}

console.log(arr);

This gives:

0: ['2021-09-09T00:00:00']
1: ['2021-09-09T00:10:00']
2: ['2021-09-09T00:20:00']

Which is where I want to start, however if I map over inner.values and try to create an new array from that, it does not return three separate arrays but one.e.g

const newArray = x.forEach(inner => console.log(new Array(inner)))

Output

0: (3) [104, 105, 107]

How could I achieve the above desired structure.

Think about your for loop... you have the index available to access both data.dates and innerValues[0].value (hint: [data.dates[0], innerValues[0].name, innerValues[0].value[0]]) — pilchard
– pilchard, Commented Jan 24, 2022 at 10:36
Can't you have the endpoint (I'm assuming) that's giving you that data output it in the correct format? — Andy
– Andy, Commented Jan 24, 2022 at 10:38
@Andy yes, although this is for a specific component which could change in the future, so to not change the api in the first instance. — Sole
– Sole, Commented Jan 24, 2022 at 10:41
@pilchard can you elaborate? that would be accessing the first element i.e [0] but how would I get each value and associate it to the Name_1 property — Sole
– Sole, Commented Jan 24, 2022 at 10:47

mplungjan · Accepted Answer · 2022-01-24 11:16:07Z

2

You can use reduce and map to loop over innerValues and their values

const dates = data.dates
const newArr = data.innerValues.reduce((acc, cur, i) => {
  acc.push(cur.value.map((value, i) => ([dates[i], cur.name, value])));
  return acc;
}, []).flat()
console.log(newArr)

<script>
  const data = {
    "dates": [
      "2015-09-09T00:00:00",
      "2015-09-09T00:10:00",
      "2015-09-09T00:20:00",
    ],
    "innerValues": [{
        "name": "Name_1",
        "value": [
          104,
          105,
          107,
        ]
      },
      {
        "name": "Name_2",
        "value": [
          656,
          777,
          145,
        ]
      }
    ],
  }
</script>

edited Jan 24, 2022 at 11:16

answered Jan 24, 2022 at 10:51

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sole Over a year ago

Thanks, but for example say if there was another object in innerValues, would it work the same way? i.e 'Name_2'

Sole Over a year ago

I have updated the question, with example

mplungjan Over a year ago

@Sole Push is more elegant

Sole Over a year ago

Could this use concat instead of flat?

Collectives™ on Stack Overflow

Create array data structure from nested object of arrays in JS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related