如何使用 ES6 Object spread 更新数组内的对象？

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?

Answer 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