How to use ES6 Object spread to update object inside array?

Question

I've got the following array of objects which comes from a response:

const baseInput = [{
    PaymentRequirementsDetail:
    { dateDue: '12/02/2019',
        outstandingMinimum: { Money: { amount: '5.20', code: 'GBP' } },
        overlimit: { Money: { amount: '345.20', code: 'GBP' } },
        arrears: { Money: { amount: '345.20', code: 'GBP' } } }
},
{ Account: {},
    AccountId: '00000012345',
    CardBrand: 'SOMEBRAND',
    isAccountElibible: false,
    Customer:
    { salutation: 'Mr',
        givenName: 'James',
        familyName: 'Jamesy',
        suffix: 'Dr' },
    Delinquency: { monthsInArrears: 0, isOverlimit: true } }]

I am then transforming the response with a bunch of functions and am returning a friendly, formatted version of the above.

const baseOutput = transform(baseInput);

This returns:

   {    name: 'Mr James Jamesy, Dr',
        cardBrand: 'SOMEBRAND',
        isAccountElibible: false,
        delinquency: { monthsInArrears: 0, isOverlimit: true },
        dateDue: '12/02/2019',
        outstandingMinimumAmount: 'GBP, 5.20',
        overlimitAmount: 'GBP, 345.20',
        arrearsAmount: 'GBP, 345.20' }

I would now like to test this and generate a few snapshots.

I can copy/paste the above code into my test-cases and change values as I do my assertions which works fine. Like this;

    test('should omit suffix if it is undefined', () => {
    const input = [{
        PaymentRequirementsDetail:
        { dateDue: '12/02/2019',
            outstandingMinimum: { Money: { amount: '5.20', code: 'GBP' } },
            overlimit: { Money: { amount: '345.20', code: 'GBP' } },
            arrears: { Money: { amount: '345.20', code: 'GBP' } } }
    },
    { Account: {},
        AccountId: '00000012345',
        CardBrand: 'SOMEBRAND',
        isAccountElibible: true,
        Customer:
        { salutation: 'Mr',
            givenName: 'James',
            familyName: 'Jamesy' },
        Delinquency: { monthsInArrears: 0, isOverlimit: true } }];

    const output = transform(input);

    expect(baseOutput).toMatchDiffSnapshot(output);
});

This will generate my snapshot as I require it and I will be able to see the difference between the version with a suffix and the version without one clearly.

However I believe that there is a cleaner way to do this using the object spread operator. Instead of all of the above code, I should be left with;

 const input = [{
        ...baseInput,
        Customer:
        { salutation: 'Mr',
        givenName: 'James',
        familyName: 'Jamesy'
        }
    }];

I am unable to however utilise the spread operator in a way so that I can achieve that. Can anyone see where my mistake is?

Did you try this ? const input = [...baseInput] and then run a .map function and match the object key in which you want to enter customer data object. — Asad Marfani
– Asad Marfani, Commented Feb 19, 2019 at 14:27
because Customer is inside the second object of an array so you have to wrap it with the second object in order for it to work — Silvio Biasiol
– Silvio Biasiol, Commented Feb 19, 2019 at 14:31

Markus Dresch · Accepted Answer · 2019-02-19 14:26:30Z

1

Your baseInput is an Array with two items. The spread operator works on either arrays or objects, what you are doing here is spreading the array into your target object.

If your model does not change, you could simply spread the indexed object into your target like so:

const input = [{
    ...baseInput[0]
  },{
        ...baseInput[1],
        Customer:
        { salutation: 'Mr',
        givenName: 'James',
        familyName: 'Jamesy'
        }
    }];

https://stackblitz.com/edit/typescript-imcqkh?file=index.ts

answered Feb 19, 2019 at 14:26

Markus Dresch

5,5853 gold badges22 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use ES6 Object spread to update object inside array?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related