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

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.

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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.map((j) => {
    obj = {
      ...obj,
      [j.title]: j.value,
    };
  });
  res.push(obj);
});

CodePudding user response：

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