ReactJs | Array of Arrays deconstruction problem

Question

Situation is simple: Make a double map to deconstruct into a single Array rather then multiple.

The Data example:

const data = [
    {
      name: 'testa',
      values: [
        { index: '1993', value: 5 },
        { index: '1994', value: 6 },
      ],
    },
    {
      name: 'testb',
      values: [
        { index: '1991', value: 8 },
        { index: '1992', value: 3 },
        { index: '1993', value: 9 },
      ],
    },
  ];

A method should take this array and convert into a single array of this data (order dosent matter):

const proccessedData = [
    { index: '1993', value: 5, name: 'testa' },
    { index: '1994', value: 6, name: 'testa' },
    { index: '1991', value: 8, name: 'testb' },
    { index: '1992', value: 3, name: 'testb' },
    { index: '1993', value: 9, name: 'testb' },
];

I achieve this by using this method I created:

const getData = (obj) => {
  const data = [];
  obj.map(({ values, name }) => {
    data.push(...values.map(({ index, value }) => ({ index, value, name })));
  });
  return data;
};

And it works BUT I disliake it because of (read below in The Problem):

THE PROBLEM

It depends on const data = [] to do a data.push(...). Would prefer that it would auto decontruct it so a method would look something like this:

const getData = (obj) =>
  obj.map(({ values, name }) => values.map(({ index, value }) => ({ index, value, name })));

Basically, on a single line, without the use of another variable BUT the return structure would remain as mentioned above. But using thtis method it returns an array with 2 different arrays inside.

It is being used inside another structure like so:

  const config = {
    data: getData(data),
    height: 400,
    xField: "index",
    yField: "value",
    seriesField: "name"
  };

So it has to return deconstructed array already without involving any other variables. Yes, I could leave it as it is right now, but I wanna do the deconstruction way as its cleaner, in my opinion, and I would learn something new.

NOTE doing data: {...getData(data)}, or data: [...getData(data)], does Not work.

A working example to play around: https://codesandbox.io/s/bold-cannon-fwot6?file=/src/App.js:690-826

I think your current code is quite reasonable, but ditch the .map and use forEach or for instead - only use .map when returning from the callback to create a new array — CertainPerformance
– CertainPerformance, Commented May 23, 2021 at 15:19

georg · Accepted Answer · 2021-05-23 15:26:46Z

3

This would be simpler with flatMap:

const data = [
    {
      name: 'testa',
      values: [
        { index: '1993', value: 5 },
        { index: '1994', value: 6 },
      ],
    },
    {
      name: 'testb',
      values: [
        { index: '1991', value: 8 },
        { index: '1992', value: 3 },
        { index: '1993', value: 9 },
      ],
    },
  ];

proccessedData = data.flatMap(d => d.values.map(v => ({...v, name: d.name})))

console.log(proccessedData)

edited May 23, 2021 at 15:26

answered May 23, 2021 at 15:18

georg

216k57 gold badges324 silver badges401 bronze badges

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

1 Comment

Lith Over a year ago

Never knew about it. Thx, it works perfectly. Ill accept it as an answer shortly, as StackOverflow not allowing me for the next 3 mins for whatever reason.

Mamunur Rashid · Accepted Answer · 2021-05-23 18:33:09Z

0

You can also try this: I am using here map function twice, and then flatten into a single array, The flatMap method is identical to a map followed by a call to a flat of depth 1.

const data = [
  {
    name: 'testa',
    values: [
      { index: '1993', value: 5 },
      { index: '1994', value: 6 },
    ],
  },
  {
    name: 'testb',
    values: [
      { index: '1991', value: 8 },
      { index: '1992', value: 3 },
      { index: '1993', value: 9 },
    ],
  },
];

const dataProcess = data
  .map((d) =>
  d.values.map((v) => ({...v, name: d.name}))
).flat();

console.log(dataProcess);

answered May 23, 2021 at 18:33

Mamunur Rashid

1,17719 silver badges38 bronze badges

Collectives™ on Stack Overflow

ReactJs | Array of Arrays deconstruction problem

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related