Pivoting Data into Columns Using ES6 and Typescript and Index Signatures

Question

have the following data structure that needs to be transformed/pivoted from:

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'},
];

with type

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

into

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: ''...}, 
    ...},
];

So basically auction name needs to move to the rows while bringing the whole record of data with it (it will end up with auctions as columns in a grid). The type should therefore contain most fields in IOrder but also include something like

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

Note the auction names will not be known in advance. Am really lost for how this is meant to work both with Typescript and also with index signatures. Any transformations I have tried have had error due to missing index signatures. Any ideas on how to transform it?

Just `Record` or `{[auction: string]: IOrder}`? – Bergi Oct 03 '22 at 16:30 — Bergi, Oct 03 '22 at 16:30

score 0 · Answer 1 · answered Oct 03 '22 at 16:41

Here's what I did to solve it

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

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — ethry, Oct 06 '22 at 20:13

Pivoting Data into Columns Using ES6 and Typescript and Index Signatures

1 Answers1