Extract properties from an array of nested JSON objects-CodePudding

I have the following dataArray

const dataArray = [
    {
        "identifier": "sku-01",
        "data": [
            {
                "productName": "Drink1",
                "productProperty": {
                    "productVolume": "110 ml"
                }
            },
            {
                "productName": "Drink2",
                "productProperty": {
                    "productVolume": "110 ml"
                }
            },
            {
                "productName": "Drink3",
                "productProperty": {
                    "productVolume": "110 ml"
                }
            },
            {
                "productName": "Drink4",
                "productProperty": {
                    "productVolume": "110 ml"
                }
            }
        ]
    },
    {
        "identifier": "sku-02",
        "data": [
            {
                "productName": "Drink1",
                "productProperty": {
                    "productVolume": "120 ml"
                }
            },
            {
                "productName": "Drink2",
                "productProperty": {
                    "productVolume": "120 ml"
                }
            },
            {
                "productName": "Drink3",
                "productProperty": {
                    "productVolume": "120 ml"
                }
            },
            {
                "productName": "Drink4",
                "productProperty": {
                    "productVolume": "120 ml"
                }
            }
        ]
    },
    {
        "identifier": "sku-03",
        "data": [
            {
                "productName": "Drink1",
                "productProperty": {
                    "productVolume": "130 ml"
                }
            },
            {
                "productName": "Drink2",
                "productProperty": {
                    "productVolume": "130 ml"
                }
            },
            {
                "productName": "Drink3",
                "productProperty": {
                    "productVolume": "130 ml"
                }
            },
            {
                "productName": "Drink4",
                "productProperty": {
                    "productVolume": "130 ml"
                }
            }
        ]
    }
]

I want to convert it into something like:

   const result = [
  {
    drink1: [
      { identifier: 'sku-01', productVolume: '110 ml' },
      { identifier: 'sku-02', productVolume: '120 ml' },
      { identifier: 'sku-03', productVolume: '130 ml' },
    ],
  },
  {
    drink2: [
      { identifier: 'sku-01', productVolume: '110 ml' },
      { identifier: 'sku-02', productVolume: '120 ml' },
      { identifier: 'sku-03', productVolume: '130 ml' },
    ],
  },
  {
    drink3: [
      { identifier: 'sku-01', productVolume: '110 ml' },
      { identifier: 'sku-02', productVolume: '120 ml' },
      { identifier: 'sku-03', productVolume: '130 ml' },
    ],
  },
  {
    drink4: [
      { identifier: 'sku-01', productVolume: '110 ml' },
      { identifier: 'sku-02', productVolume: '120 ml' },
      { identifier: 'sku-03', productVolume: '130 ml' },
    ],
  },
];

I can already do this with a for loop and by re-creating objects inside the result, but that looks kinda ugly. Is there a clean way of doing it with ES6? How would I approach it? ProductName is dynamic, and there can be many products inside the data array.

CodePudding user response：

You could group by productName and push new objects with identifier and productVolume.

const
    data = [{ identifier: "sku-01", data: [{ productName: "Drink1", productProperty: { productVolume: "110 ml" } }, { productName: "Drink2", productProperty: { productVolume: "110 ml" } }, { productName: "Drink3", productProperty: { productVolume: "110 ml" } }, { productName: "Drink4", productProperty: { productVolume: "110 ml" } }] }, { identifier: "sku-02", data: [{ productName: "Drink1", productProperty: { productVolume: "120 ml" } }, { productName: "Drink2", productProperty: { productVolume: "120 ml" } }, { productName: "Drink3", productProperty: { productVolume: "120 ml" } }, { productName: "Drink4", productProperty: { productVolume: "120 ml" } }] }, { identifier: "sku-03", data: [{ productName: "Drink1", productProperty: { productVolume: "130 ml" } }, { productName: "Drink2", productProperty: { productVolume: "130 ml" } }, { productName: "Drink3", productProperty: { productVolume: "130 ml" } }, { productName: "Drink4", productProperty: { productVolume: "130 ml" } }] }],
    result = data.reduce((r, { identifier, data }) => {
        data.forEach(({ productName, productProperty: { productVolume } }) => {
            (r[productName] ??= []).push({ identifier, productVolume })
        });
        return r;
    }, {});

console.log(result);

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

CodePudding user response：

This should do it:

const dataArray = [
{"identifier": "sku-01",
    "data": [{"productName": "Drink1", "productProperty": { "productVolume": "110 ml" }},
             {"productName": "Drink2", "productProperty": { "productVolume": "110 ml" }},
             {"productName": "Drink3", "productProperty": { "productVolume": "110 ml" }},
             {"productName": "Drink4", "productProperty": { "productVolume": "110 ml" }}] },{"identifier": "sku-02",
    "data": [{"productName": "Drink1", "productProperty": { "productVolume": "120 ml" }},
             {"productName": "Drink2", "productProperty": { "productVolume": "120 ml" }},
             {"productName": "Drink3", "productProperty": { "productVolume": "120 ml" }},
             {"productName": "Drink4", "productProperty": { "productVolume": "120 ml" }}] },{"identifier": "sku-03",
    "data": [{"productName": "Drink1", "productProperty": { "productVolume": "130 ml" }},
             {"productName": "Drink2", "productProperty": { "productVolume": "130 ml" }},
             {"productName": "Drink3", "productProperty": { "productVolume": "130 ml" }},
             {"productName": "Drink4", "productProperty": { "productVolume": "130 ml" }}] }];

const res=Object.entries(dataArray.reduce((acc,s)=>{
  s.data.forEach(d=>{ 
    (acc[d.productName]=acc[d.productName]??[])
            .push({identifier:s.identifier,productVolume:d.productProperty.productVolume});
  })
  return acc
}, {})).map(([k,v])=>({[k]:v}));

console.log(res)

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