I am trying to reduce an array of data into a nested object. I almost have it except for the next items. Instead of pushing into the array it overwrites the entire array itself leaving only 1 value.
I am 100% sure the issue is with this line of code [...(acc[t.sub_region] || []), t]
my gut is telling me I need to do something along the lines of [...(acc[t.region][t.sub_region] || []), t]
however it is erroring out when I try this.
I posted a snippet below, as you can see SOUTH_EUROPE only has 1 item inside of its array when it should have 2.
Desired Result
const sorted = { EUROPE: { SOUTH_EUROPE: [{ item: 'Item 1' }, { item: 'Item 2' }], NORTH_EUROPE: [{ item: 'Item 3' }], }, AMERICAS: { NORTH_AMERICA: [{ item: 'Item 4' }], }, }
const items = [ { region: 'EUROPE', sub_region: 'SOUTH_EUROPE', item: 'Item 1' }, { region: 'EUROPE', sub_region: 'SOUTH_EUROPE', item: 'Item 2' }, { region: 'EUROPE', sub_region: 'NORTH_EUROPE', item: 'Item 3' }, { region: 'AMERICAS', sub_region: 'NORTH_AMERCA', item: 'Item 4' }, ] const sorted = items.reduce((acc, t) => { return { ...acc, [t.region]: { ...acc[t.region], [t.sub_region]: [...(acc[t.sub_region] || []), t], }, } }, {}) console.log(sorted)
Advertisement
Answer
sub_region
is a nested property, so you need to use acc?.[t.region]?.[t.sub_region]
to access it. Note that the optional chaining operator is used to prevent an error from being thrown when the region does not exist yet.
const items = [ { region: 'EUROPE', sub_region: 'SOUTH_EUROPE', item: 'Item 1' }, { region: 'EUROPE', sub_region: 'SOUTH_EUROPE', item: 'Item 2' }, { region: 'EUROPE', sub_region: 'NORTH_EUROPE', item: 'Item 3' }, { region: 'AMERICAS', sub_region: 'NORTH_AMERCA', item: 'Item 4' }, ] const sorted = items.reduce((acc, t) => { return { ...acc, [t.region]: { ...acc[t.region], [t.sub_region]: [...(acc?.[t.region]?.[t.sub_region] || []), {item: t.item}], }, } }, {}) console.log(sorted)