CODEWITHSUNDEEP
javascriptarrays
Lith
Lith

Reputation: 1325

ReactJs | Array of Arrays deconstruction problem

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

Upvotes: 0

Views: 60

Answers (2)

Mamunur Rashid
Mamunur Rashid

Reputation: 1185

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);

Upvotes: 0

georg
georg

Reputation: 215019

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)

Upvotes: 3

Related Questions