Spread syntax for nested javascript object with dynamic properties for grouping

Question

const data = [{year:2019,month:1,id:"xd1"},
 {year:2019,month:1,id:"xd2"},
 {year:2019,month:1,id:"xd4"},
 {year:2019,month:2,id:"xd1"},
 {year:2018,month:1,id:"rd3"},
 {year:2018,month:2,id:"rd6"},
 {year:2018,month:2,id:"rd7"}
]

const result = data.reduce((state,d)=>{
    return {
        ...state,
        [d.year]:{
            ...state[d.year],
            [d.month]:[
                ...state[d.year][d.month]
                ,d.id]
        }
    }
},{})

console.log(result);



const result = data.reduce((state,d)=>{
    return {
        ...state,
        [d.year]:{
            ...state[d.year],
            [d.month]:[].concat([state[d.year][d.month]],[d.id])
        }
    }
},{})

both return an Error TypeError: Cannot read property '1' of undefined How can I use the spread syntax to get a grouped result like this.

{'2019':{
   '1':["xd1","xd2","xd3"],
   '2':["xd1"]},
 '2018':{
   '1':["rd3"],
   '2':["rd6","rd7"]
 }

}

Please consider using reduce and spread syntax and not chaining other methods because the its actually part of a bigger construct and other things wont help. Thx. EDIT: like stated in the comments. I would explicitly like solve it inline with spread operator that returns new objects or arrays. No extra libraries like lodash.

Possible duplicate of Group array of object nesting some of the keys with specific names — Heretic Monkey
– Heretic Monkey, Commented Feb 7, 2019 at 22:02
When the state is empty, there won't be a state[d.year] so state[d.year][d.month] will be the error you see. — Pointy
– Pointy, Commented Feb 7, 2019 at 22:03
@HereticMonkey I don't think this is a duplicate question. The object structure is slightly different and solutions contain lodash and not spread. — silverfighter
– silverfighter, Commented Feb 7, 2019 at 22:19
Better focus on readability, rather than using spread in this case — baao
– baao, Commented Feb 7, 2019 at 22:23

Kosh · Accepted Answer · 2019-02-07 22:21:30Z

2

Just add some sh*t and sticks:

const data = [{year:2019,month:1,id:"xd1"},
 {year:2019,month:1,id:"xd2"},
 {year:2019,month:1,id:"xd4"},
 {year:2019,month:2,id:"xd1"},
 {year:2018,month:1,id:"rd3"},
 {year:2018,month:2,id:"rd6"},
 {year:2018,month:2,id:"rd7"}
]

const result = data.reduce((state, d) => {
    return {
        ...state,
        [d.year]: {
            ...state[d.year],
            [d.month]: [
                ...((state[d.year]||{})[d.month]||[]),
                d.id]
        }
    }
},{})

console.log(result);

answered Feb 7, 2019 at 22:21

Kosh

18.6k2 gold badges24 silver badges39 bronze badges

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

5 Comments

baao Over a year ago

It's a shame that js allows syntax like that

Kosh Over a year ago

@bambam, "it's both a gift and a curse".

baao Over a year ago

:-) True. Here it's a curse

silverfighter Over a year ago

thx, upvote for answering the actual question. Next time I'll ask if spread is useful, beautiful or hipster, but for now just - thanks

Kosh Over a year ago

@silverfighter, happy to help.

Collectives™ on Stack Overflow

Spread syntax for nested javascript object with dynamic properties for grouping

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related