Trying to collapse an array of objects in a single object with the reduce method

Question

I have been trying to summarize a list of two entries objects in a single one using the array's reduce method, but what I have in return is the value of one of the last entry. The code:

const swatches = [
           { emoji: "lion"    , color: "#ff691f" },
           { emoji: "tiger"   , color: "#fab81e" },
           { emoji: "fish"    , color: "#7fdbb6" },
           { emoji: "frog"    , color: "#19cf86" },
           { emoji: "pig"     , color: "#f58ea8" },
           { emoji: "unicorn" , color: "#981ceb" },
           { emoji: "rabbit"  , color: "#ffffff" },
           { emoji: "wolf"    , color: "#000000" },
           ]

const animals = swatches.reduce( (emojis, entry) => emojis[entry.emoji] = entry.color, {} )

Nina Scholz · Accepted Answer · 2019-11-16 20:20:35Z

2

You need to return the accumulator emojis.

const swatches = [
           { emoji: "lion"    , color: "#ff691f" },
           { emoji: "tiger"   , color: "#fab81e" },
           { emoji: "fish"    , color: "#7fdbb6" },
           { emoji: "frog"    , color: "#19cf86" },
           { emoji: "pig"     , color: "#f58ea8" },
           { emoji: "unicorn" , color: "#981ceb" },
           { emoji: "rabbit"  , color: "#ffffff" },
           { emoji: "wolf"    , color: "#000000" },
           ]

const animals = swatches.reduce(
    (emojis, entry) => (emojis[entry.emoji] = entry.color, emojis),
    {}
);

console.log(animals);

.as-console-wrapper { max-height: 100% !important; top: 0; }

answered Nov 16, 2019 at 20:20

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

Comments

Ori Drori · Accepted Answer · 2019-11-16 20:25:13Z

1

To fix your code return the accumulator object (emojis) at the end of the reducer function:

const swatches = [{"emoji":"lion","color":"#ff691f"},{"emoji":"tiger","color":"#fab81e"},{"emoji":"fish","color":"#7fdbb6"},{"emoji":"frog","color":"#19cf86"},{"emoji":"pig","color":"#f58ea8"},{"emoji":"unicorn","color":"#981ceb"},{"emoji":"rabbit","color":"#ffffff"},{"emoji":"wolf","color":"#000000"}]

const animals = swatches.reduce( (emojis, entry) => {
  emojis[entry.emoji] = entry.color
  return emojis
}, {})

console.log(animals)

You can also map the array to an array of entries - [key, value], and then convert it to an object with Object.fromEntries():

const swatches = [{"emoji":"lion","color":"#ff691f"},{"emoji":"tiger","color":"#fab81e"},{"emoji":"fish","color":"#7fdbb6"},{"emoji":"frog","color":"#19cf86"},{"emoji":"pig","color":"#f58ea8"},{"emoji":"unicorn","color":"#981ceb"},{"emoji":"rabbit","color":"#ffffff"},{"emoji":"wolf","color":"#000000"}]

const animals = Object.fromEntries(swatches.map(({ emoji, color }) => [emoji, color]))

console.log(animals)

edited Nov 16, 2019 at 20:25

answered Nov 16, 2019 at 20:19

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

2 Comments

georg Over a year ago

...or simply Object.fromEntries(swatches.map(Object.values))

Ori Drori Over a year ago

Although we've got object keys traversal order in ES6, it's still a bit risking (numeric keys for example), so I prefer the more explicit form.

Bergi · Accepted Answer · 2019-11-16 20:20:39Z

0

You would need to return the ("new") accumulator (your emojis object) from the callback, to be used in the next iteration or as the final result:

const animals = swatches.reduce((emojis, entry) => {
    emojis[entry.emoji] = entry.color;
    return emojis;
}, {});

It might be simpler to work with a normal loop:

const animals = {};
for (const entry of swatches)
    animals[entry.emoji] = entry.color;

answered Nov 16, 2019 at 20:20

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Collectives™ on Stack Overflow

Trying to collapse an array of objects in a single object with the reduce method

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related