JavaScript 将数据分组到 2 层深的树视图中

Question

I have a JSON object like this:

{
    id: '1', 
    items: [
        {
            id: '1',
            saleId: '123',
            saleIdAndItemId: '123456',
            locationId: '123',
            itemCode: '456',
            itemDescription: 'my item',
            categoryCode: '555',
            categoryDescription: 'my category',
            qty: 10,
            saleValue: 200
        },
        {
            id: '1',
            saleId: '123',
            saleIdAndItemId: '123456',
            locationId: '123',
            itemCode: '456',
            itemDescription: 'my item',
            categoryCode: '555',
            categoryDescription: 'my category',
            qty: 10,
            saleValue: 200
        }
    ]
},
{
    id: '2', 
    items: [
        {
            id: '2',
            saleId: '123',
            saleIdAndItemId: '123456',
            locationId: '123',
            itemCode: '456',
            itemDescription: 'my item',
            categoryCode: '556',
            categoryDescription: 'my category 6',
            qty: 10,
            saleValue: 200
        }
    ]
},
{
    id: '3', 
    items: [
        {
            venueId: '3',
            saleId: '123',
            saleIdAndItemId: '123456',
            locationId: '123',
            itemCode: '456',
            itemDescription: 'my item',
            categoryCode: '557',
            categoryDescription: 'my category 7',
            qty: 10,
            saleValue: 200
        }
    ]
};

I want to make this into a new JSON object where everything is grouped by id (it already is but I need the number to become the key) then by categoryCode so the result looks something like this:

{
    '1': { 
        '555': { 
            id: '1',
            saleId: '123',
            saleIdAndItemId: '123456',
            locationId: '123',
            itemCode: '456',
            itemDescription: 'my item',
            categoryCode: '555',
            categoryDescription: 'my category',
            qty: 10,
            saleValue: 200
        }
    }
}

Is there a simple way to do this either using lodash or just plain JavaScript or some NPM package?

Answer 1

I create a general function that receiving array of items and parse it based on attrKeys and infoKeys array:

 const data = [{ id: '1', items: [{ id: '1', saleId: '123', saleIdAndItemId: '123456', locationId: '123', itemCode: '456', itemDescription: 'my item', categoryCode: '555', categoryDescription: 'my category', qty: 10, saleValue: 200 }, { id: '1', saleId: '123', saleIdAndItemId: '123456', locationId: '123', itemCode: '456', itemDescription: 'my item', categoryCode: '555', categoryDescription: 'my category', qty: 10, saleValue: 200 }] }, { id: '2', items: [{ id: '2', saleId: '123', saleIdAndItemId: '123456', locationId: '123', itemCode: '456', itemDescription: 'my item', categoryCode: '556', categoryDescription: 'my category 6', qty: 10, saleValue: 200 }] }, { id: '3', items: [{ venueId: '3', saleId: '123', saleIdAndItemId: '123456', locationId: '123', itemCode: '456', itemDescription: 'my item', categoryCode: '557', categoryDescription: 'my category 7', qty: 10, saleValue: 200 }] }]; const transformData = (input, attrKeys = [], infoKeys = [], deep = 0) => { if (input && typeof input === 'object' && input.length) { const key1 = attrKeys[deep]; const key2 = infoKeys[deep]; deep++; const output = {} input.forEach(i => { const info = i[key2] ? transformData(i[key2], attrKeys, infoKeys, deep) : i; output[`${i[key1]}`] = info; }); return output; } return input; }; //What you want is here const transformedData = transformData(data, ['id','categoryCode'], ['items']) console.log({transformedData})

Answer 2

Follow the nested for...of loop approach:

 const data = [{ id: '1', items: [{ id: '1', saleId: '123', saleIdAndItemId: '123456', locationId: '123', itemCode: '456', itemDescription: 'my item', categoryCode: '555', categoryDescription: 'my category', qty: 10, saleValue: 200 }, { id: '1', saleId: '123', saleIdAndItemId: '123456', locationId: '123', itemCode: '456', itemDescription: 'my item', categoryCode: '555', categoryDescription: 'my category', qty: 10, saleValue: 200 }] }, { id: '2', items: [{ id: '2', saleId: '123', saleIdAndItemId: '123456', locationId: '123', itemCode: '456', itemDescription: 'my item', categoryCode: '556', categoryDescription: 'my category 6', qty: 10, saleValue: 200 }] }, { id: '3', items: [{ venueId: '3', saleId: '123', saleIdAndItemId: '123456', locationId: '123', itemCode: '456', itemDescription: 'my item', categoryCode: '557', categoryDescription: 'my category 7', qty: 10, saleValue: 200 }] }]; let finalData = {}; for (let obj of data) { finalData[obj.id] = {}; for (var item of obj.items) { finalData[obj.id][item.categoryCode] = { ...item }; } } console.log(finalData);

Answer 3

You can use Array.reduce function to achieve it.

 const array = [{ id: '1', items: [ { id: '1', saleId: '123', saleIdAndItemId: '123456', locationId: '123', itemCode: '456', itemDescription: 'my item', categoryCode: '555', categoryDescription: 'my category', qty: 10, saleValue: 200 }, { id: '1', saleId: '123', saleIdAndItemId: '123456', locationId: '123', itemCode: '456', itemDescription: 'my item', categoryCode: '555', categoryDescription: 'my category', qty: 10, saleValue: 200 } ] }, { id: '2', items: [ { id: '2', saleId: '123', saleIdAndItemId: '123456', locationId: '123', itemCode: '456', itemDescription: 'my item', categoryCode: '556', categoryDescription: 'my category 6', qty: 10, saleValue: 200 } ] }, { id: '3', items: [ { id: '3', saleId: '123', saleIdAndItemId: '123456', locationId: '123', itemCode: '456', itemDescription: 'my item', categoryCode: '557', categoryDescription: 'my category 7', qty: 10, saleValue: 200 } ] }]; console.log( array // flatten the items array .reduce((prev, curr) => { return prev.concat(curr.items); }, []) .reduce((prev, curr) => { if (!prev[curr.id]) prev[curr.id] = {}; if (!prev[curr.id][curr.categoryCode]) prev[curr.id][curr.categoryCode] = {}; prev[curr.id][curr.categoryCode] = curr; return prev; }, {}) );

Answer 4

Alternatively, you can archive that by just 7 lines of code using reduce function.

 const array = [ { id: '1', items: [ { id: '1', saleId: '123', saleIdAndItemId: '123456', locationId: '123', itemCode: '456', itemDescription: 'my item', categoryCode: '555', categoryDescription: 'my category', qty: 10, saleValue: 200 }, { id: '1', saleId: '123', saleIdAndItemId: '123456', locationId: '123', itemCode: '456', itemDescription: 'my item', categoryCode: '555', categoryDescription: 'my category', qty: 10, saleValue: 200 } ] }, { id: '2', items: [ { id: '2', saleId: '123', saleIdAndItemId: '123456', locationId: '123', itemCode: '456', itemDescription: 'my item', categoryCode: '556', categoryDescription: 'my category 6', qty: 10, saleValue: 200 } ] }, { id: '3', items: [ { venueId: '3', saleId: '123', saleIdAndItemId: '123456', locationId: '123', itemCode: '456', itemDescription: 'my item', categoryCode: '557', categoryDescription: 'my category 7', qty: 10, saleValue: 200 } ] } ]; console.log( array.reduce((prev, curr) => { prev[curr.id] = curr.items.reduce((prev, curr) => { (prev[curr.categoryCode] = []).push(curr); return prev; }, {}); return prev; }, {}) );