How can I extract elements of an array inside an array to this array?

Question

What I have is this:

const tableData = [
    {
        display: '2022-03',
        column: 'data',
        detailList: [
            {
                title: 'Quantity',
                value: 1,
                sourceId: null,
            },
            {
                title: 'Price',
                value: 2,
                sourceId: null,
            },
            {
                title: 'Weight',
                value: 3,
                sourceId: null,
            },
            {
                title: 'income',
                value: 4,
                sourceId: null,
            },
            
        ],
    },
    {
        display: '2022-02',
        column: 'data',
        detailList: [
            {
                title: 'Quantity',
                value: 7,
                sourceId: null,
            },
            {
                title: 'Price',
                value: 6,
                sourceId: null,
            },
            {
                title: 'Weight',
                value: 5,
                sourceId: null,
            },
            {
                title: 'income',
                value: 4,
                sourceId: null,
            },
            
        ],
    },
];

Now I want it to become this:

res = [
    {
        title: '2022-03',
        'Quantity': '1',
        'Price': '2',
        'Weight': '3',
        'income': '4',      
    },
    {
        title: '2022-02',
        'Quantity': '7',
        'Price': '6',
        'Weight': '5',
        'income': '4',
    },
];

What's the best way to do it?

I'm trying to create a new array outside, and use two .map() to make it. But it looks not readable.

Can somebody give me a better solution that uses some ES6 features that makes it look more readable.

Welcome. Please don't post code as images. See How to Ask. Put your code in a snippet demo using the editor. — isherwood
– isherwood, Commented Apr 8, 2022 at 18:58
Please try this: iterate over the tableData array (using .map()) and use .reduce() for the detailList array to return an object with the desired key-value pairs. Append this object with title: ..... That's it ! — jsN00b
– jsN00b, Commented Apr 8, 2022 at 19:02

Barmar · Accepted Answer · 2022-04-08 19:11:06Z

2

You should assign the result of map() directly to res, rather than calling push() inside the map.

You can use Object.fromEntries() to create the object from the inner map.

Destructuring and spread syntax can simplify the way you access the properties and build the resulting object.

const tableData = [{
    display: '2022-03',
    column: 'data',
    detailList: [{
        title: 'Quantity',
        value: 1,
        sourceId: null,
      },
      {
        title: 'Price',
        value: 2,
        sourceId: null,
      },
      {
        title: 'Weight',
        value: 3,
        sourceId: null,
      },
      {
        title: 'income',
        value: 4,
        sourceId: null,
      },

    ],
  },
  {
    display: '2022-02',
    column: 'data',
    detailList: [{
        title: 'Quantity',
        value: 7,
        sourceId: null,
      },
      {
        title: 'Price',
        value: 6,
        sourceId: null,
      },
      {
        title: 'Weight',
        value: 5,
        sourceId: null,
      },
      {
        title: 'income',
        value: 4,
        sourceId: null,
      },

    ],
  },
];

let res = tableData.map(({
  display,
  detailList
}) => ({
  title: display,
  ...Object.fromEntries(detailList.map(({
    title,
    value
  }) => [title, value === null ? '-' : value]))
}));

console.log(res);

answered Apr 8, 2022 at 19:11

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

1 Comment

jsN00b Over a year ago

It is my understanding that this answer is a better solution in terms of performance (since the one with the .reduce() uses ... multiple times, among other potential reason/s).

I-vasilich-I · Accepted Answer · 2022-04-08 19:04:23Z

1

const res = tableData.map(({ display, detailList}) => {
  const obj = {
    title: display,
  }
  detailList.forEach(el => obj[el.title] = el.value);
  return obj;
})

answered Apr 8, 2022 at 19:04

I-vasilich-I

2581 silver badge8 bronze badges

Comments

jsN00b · Accepted Answer · 2022-04-08 19:16:06Z

This may be one possible solution to achieve the desired objective.

Code Snippet

const transformArray = arr => arr.map(  // iterate using "map"
  ({display : title, detailList}) => ({ // de-structure, and rename
    title,
    ...(
      detailList.reduce(                // iterate using "reduce"
        (fin, {title, value}) => ({     // de-structure to access title, value
          ...fin,
          [title]: value                // may add "value" is null check here
        }),
        {}                              // the "fin" object is initialized to empty
      )
    )
  })
);

const tableData = [
    {
        display: '2022-03',
        column: 'data',
        detailList: [
            {
                title: 'Quantity',
                value: 1,
                sourceId: null,
            },
            {
                title: 'Price',
                value: 2,
                sourceId: null,
            },
            {
                title: 'Weight',
                value: 3,
                sourceId: null,
            },
            {
                title: 'income',
                value: 4,
                sourceId: null,
            },
            
        ],
    },
    {
        display: '2022-02',
        column: 'data',
        detailList: [
            {
                title: 'Quantity',
                value: 7,
                sourceId: null,
            },
            {
                title: 'Price',
                value: 6,
                sourceId: null,
            },
            {
                title: 'Weight',
                value: 5,
                sourceId: null,
            },
            {
                title: 'income',
                value: 4,
                sourceId: null,
            },
        ],
    },
];


console.log(transformArray(tableData));

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

Explanation

Inline comments explain the steps involved.

NOTES

This solution uses:

'.map()`
.reduce()
de-structure and rename (display is renamed as title
arrow functions
... spread to perform shallow-copy

Amit · Accepted Answer · 2022-04-08 19:53:24Z

0

Try this.

const tableData = [
  {
    display: "2022-03",
    column: "data",
    detailList: [
      {
        title: "Quantity",
        value: 1,
        sourceId: null,
      },
      {
        title: "Price",
        value: 2,
        sourceId: null,
      },
      {
        title: "Weight",
        value: 3,
        sourceId: null,
      },
      {
        title: "income",
        value: 4,
        sourceId: null,
      },
    ],
  },
  {
    display: "2022-02",
    column: "data",
    detailList: [
      {
        title: "Quantity",
        value: 7,
        sourceId: null,
      },
      {
        title: "Price",
        value: 6,
        sourceId: null,
      },
      {
        title: "Weight",
        value: 5,
        sourceId: null,
      },
      {
        title: "income",
        value: 4,
        sourceId: null,
      },
    ],
  },
];
const res = [];
tableData.map((i) => {
  let obj;
  i.detailList.forEach((j) => {
    obj = {
      ...obj,
      [j.title]: j.value,
    };
  });
  res.push(obj);
});

edited Apr 8, 2022 at 19:53

answered Apr 8, 2022 at 19:14

Amit

1,1832 gold badges11 silver badges25 bronze badges

1 Comment

Barmar Over a year ago

The result of i.detailList.map() isn't being used, so it should be forEach()

Collectives™ on Stack Overflow

How can I extract elements of an array inside an array to this array?

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related