在数组上映射后创建动态对象键

Question

So I want to create a quite complex data structure that looks like the following:

slots: {
    'slot_1': {
         id: 'slot_1',
         associatedCard: {}
         },
    'slot_2': {
         id: 'slot_2',
         associatedCard: {}
         },
    'slot_3': {
         id: 'slot_3',
         associatedCard: {}
         }
}

I have 10 slots that I want to populate with cards (each slot can contain one card) so I am actually looping over the cards, creating the slots and I tried to dynamically generate the above data structure. Here is my code:

 slots: (() => {
        return {
            ...cards.map((card, index) => {
            return {
                            [`slot_${index + 1}`]: {
                                id: `slot_${index + 1}`,
                                ownedCard: {}
                            }
                        };
                    })
                };
            })(),

However, I am not getting what I desire. This is what I get:

How can I fix this so that I have slot_1 instead of 0 as key, slot_2 instead of 1 as key, etc..?

Answer 1

The problem is that map returns an array, which is why you are getting numbered keys. You need to do something like:

const slots = cards.reduce((obj, card, index) => {
  const id = `slot_${index + 1}`
  obj[id] = {
    id,
    associatedCard: card
  }
  return obj
}, {})

Answer 2

Don't Array#map the items, Array#reduce them, instead:

cards.reduce((acc, card, index) => {
    return { ...acc,
            [`slot_${index + 1}`]: {
                id: `slot_${index + 1}`,
                ownedCard: {}
            }
        };
    }, {})

The .map method will produce an array of new items based on the old ones. And since you return an object, you get an array of objects. Yet, what you want is one object that has all those keys. The .reduce method is more advanced (as in, can do more stuff) and it turns an array into "one value" -> hence reduce . Your desired value is a single object, so you can just combine each of them.

An alternative to using the spread notation is to use Object.assign and re-use the same object instead of doing a clone every time:

cards.reduce((acc, card, index) => {
    return Object.assign{acc, {
            [`slot_${index + 1}`]: {
                id: `slot_${index + 1}`,
                ownedCard: {}
            }}
        };
    }, {});

If you do want to keep the .map , then you can still chain that into .reduce :

cards.map((card, index) => {
    return {
            [`slot_${index + 1}`]: {
                id: `slot_${index + 1}`,
                ownedCard: {}
            }
        };
})
.reduce((acc, obj) => ({...acc, ...obj}));

or

cards.map((card, index) => {
    return {
            [`slot_${index + 1}`]: {
                id: `slot_${index + 1}`,
                ownedCard: {}
            }
        };
})
.reduce((acc, obj) => Object.assign(acc, obj), {});