js重组接口返回数据

希望看到更好的解决方案,谢咯!
1.模拟返回数据

const arr = [
	{
		year: '2019',
		dataValue: [
			{
				type: '蓝湛',
				value: 1,
			},
			{
				type: '魏婴',
				value: 1,
			},
			{
				type: '蓝忘机',
				value: 1,
			},
			{
				type: '魏无羡',
				value: 1,
			},
		],
	},
	{
		year: '2020',
		dataValue: [
			{
				type: '蓝湛',
				value: 2,
			},
			{
				type: '魏婴',
				value: 2,
			},
			{
				type: '蓝忘机',
				value: 2,
			},
			{
				type: '魏无羡',
				value: 2,
			},
		],
	},
];
export default { arr };

期望得到的结果

const form = {
	tableData:[
		{
			type:'蓝湛',
			number1:1,
			number2:2
		},
		{
			type:'魏婴',
			number1:1,
			number2:2
		},
		{
			type:'蓝忘机',
			number1:1,
			number2:2
		},
		{
			type:'魏无羡',
			number1:1,
			number2:2
		},
	],
	yearValue1:'2019',
	yearValue2:'2020'
}

2.引入

import hooks from './hooks/test';

3.定义

const form = reactive({
	tableData: [],
});

4.拼

	getFormData() {
		const arr = hooks.arr;
		let key = [];
		arr.forEach((item, index) => {
			form[`yearValue${index + 1}`] = item.year;
			item.dataValue.forEach((val) => {
				let obj = {};
				if (!key.includes(val.type)) {
					key.push(val.type);
					obj.type = val.type;
					form.tableData.push(obj);
				}
				let typeIndex = form.tableData.findIndex(
					(el) => el.type == val.type,
				);
				form.tableData[typeIndex][`number${index + 1}`] = val.value;
			});
		});
	},

版权声明:本文为weixin_46064865原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。