CODEWITHSUNDEEP
javascriptarrays
Han
Han

Reputation: 19

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

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.

Upvotes: 0

Views: 1299

Answers (4)

Amit
Amit

Reputation: 1153

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

Upvotes: 0

jsN00b
jsN00b

Reputation: 3691

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

Upvotes: 1

Barmar
Barmar

Reputation: 782785

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

Upvotes: 2

I-vasilich-I
I-vasilich-I

Reputation: 258

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

Upvotes: 1

Related Questions