使用ES6、Typescript和索引签名将数据透视到列中



具有以下数据结构,需要从以下数据结构进行转换/透视:

const dataReceived: IOrder[] = [
{customerName: 'Customer 1', customerId: '1',auctionName: 'Auction 1', auctionId: '1', statusName: 'Awaiting', statusId: '1', deliveryDate: '1', orderId: '31323'}, 
{customerName: 'Customer 1', customerId: '1',auctionName: 'Auction 2', auctionId: '1', statusName: 'Ready',  statusId: '2',deliveryDate: '1', orderId: '42423'},
{customerName: 'Customer 1', customerId: '1',auctionName: 'Auction 3', auctionId: '1', statusName: 'Ready', statusId: '2', deliveryDate: '1', orderId: '63353'}, 
{customerName: 'Customer 2', customerId: '2',auctionName: 'Auction 1', auctionId: '2', statusName: 'Ready', statusId: '2', deliveryDate: '1', orderId: '23232'},
{customerName: 'Customer 2', customerId: '2',auctionName: 'Auction 2', auctionId: '2', statusName: 'Awaiting', statusId: '1', deliveryDate: '1', orderId: '14433'},
{customerName: 'Customer 2', customerId: '2',auctionName: 'Auction 3', auctionId: '2', statusName: 'Ready', statusId: '2', deliveryDate: '1', orderId: '25434'},
{customerName: 'Customer 3', customerId: '3',auctionName: 'Auction 1', auctionId: '3', statusName: 'Ready', statusId: '2', deliveryDate: '1', orderId: '29332'},
{customerName: 'Customer 3', customerId: '3',auctionName: 'Auction 2', auctionId: '3', statusName: 'Awaiting', statusId: '1', deliveryDate: '1', orderId: '37364'},
{customerName: 'Customer 3', customerId: '3',auctionName: 'Auction 3', auctionId: '3', statusName: 'Awaiting', statusId: '1', deliveryDate: '1', orderId: '37112'},
];

export declare type IOrder = {
orderId: string;
deliveryDate: string;
customerId: string;
customerName: string;
auctionId: string;
auctionName: string;
statusId: string;
statusName: string;
[key: string]: string;
}

进入

const dataTransformed = [
{customerName: 'Customer 1', 
'Auction 1': { auctionName: 'Auction 1', customerName: 'Customer 1', status: 'Awaiting', orderId: ''...}, 
'Auction 2': { auctionName: 'Auction 2', customerName: 'Customer 1', status: 'Ready', orderId: '31543'...}, 
'Auction 3': { auctionName: 'Auction 3', customerName: 'Customer 1', status: 'Ready', orderId: '53662'...}, 
...}, 
{customerName: 'Customer 2', 
'Auction 1': { auctionName: 'Auction 1', customerName: 'Customer 2', status: 'Ready', orderId: '90223'...}, 
'Auction 2': { auctionName: 'Auction 2', customerName: 'Customer 2', status: 'Awaiting', orderId: ''...}, 
'Auction 3': { auctionName: 'Auction 3', customerName: 'Customer 2', status: 'Submitted', orderId: '15277'...}, 
...},
{customerName: 'Customer 3', 
'Auction 1': { auctionName: 'Auction 1', customerName: 'Customer 3', status: 'Ready', orderId: '36771'...}, 
'Auction 2': { auctionName: 'Auction 2', customerName: 'Customer 3', status: 'Submitted', orderId: '91273'...}, 
'Auction 3': { auctionName: 'Auction 3', customerName: 'Customer 3', status: 'Awaiting', orderId: ''...}, 
...},
];

因此,基本上,拍卖名称需要移动到行中,同时携带整个数据记录(它最终将拍卖作为网格中的列(。因此,该类型应该包含IOrder中的大多数字段,但也包括类似的内容

['Auction 1']: IOrder;
['Auction 2']: IOrder;
['Auction 3']: IOrder;

请注意,拍卖名称将不会提前得知。我真的不知道这是如何与Typescript和索引签名一起使用的。由于缺少索引签名,我尝试过的任何转换都有错误。关于如何改造它,有什么想法吗?

以下是我解决问题的方法

const transformData = (data: IOrder[]) => {
let uniqueAuctions = [] as string[];
let uniqueCustomers = [] as string[];
let pivotedData = [] as IOrder[];
uniqueAuctions = data.reduce((uniqueValues: string[], obj) => {
if (!uniqueValues.includes(obj['auctionName'])) {
uniqueValues.push(obj['auctionName']);
}
return uniqueValues;
}, []);
uniqueCustomers = data.reduce((uniqueValues: string[], obj) => {
if (!uniqueValues.includes(obj['customerName'])) {
uniqueValues.push(obj['customerName']);
}
return uniqueValues;
}, []);
uniqueCustomers.forEach((item) => {
pivotedData.push(
data.reduce((pivotedObj: any, obj) => {
if(item === obj['customerName']){
pivotedObj['customerId'] = obj['customerId']
pivotedObj['customerName'] = obj['customerName']
if(uniqueAuctions.includes(obj['auctionName'])){
pivotedObj[obj['auctionName']] = obj
}
}
return pivotedObj
}, {})
)
});
return pivotedData;
};

最新更新