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

时间:2019-12-17 06:45:54

标签: javascript typescript

我有一个像这样的JSON对象:

{
    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
        }
    ]
};

我想将其变成一个新的JSON对象,其中所有内容均按ID(已经是ID,但我需要数字成为键)进行分组,然后按categoryCode进行分组,因此结果看起来像这样:

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

是否有使用lodash或仅使用普通JavaScript或某些NPM软件包的简单方法?

4 个答案:

答案 0 :(得分:1)

我创建了一个通用函数,该函数接收项数组并基于attrKeys和infoKeys数组对其进行解析:

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

答案 1 :(得分:0)

遵循嵌套的for...of循环方法:

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

答案 2 :(得分:0)

您可以使用Array.reduce函数来实现它。

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

答案 3 :(得分:0)

或者,您可以使用 reduce 函数仅通过 7 行代码将其存档。

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