CODEWITHSUNDEEP
javascriptfunctional-programming
llou
llou

Reputation: 3

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

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, {} )

Upvotes: 0

Views: 50

Answers (3)

Ori Drori
Ori Drori

Reputation: 191976

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)

Upvotes: 1

Bergi
Bergi

Reputation: 664548

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;

Upvotes: 0

Nina Scholz
Nina Scholz

Reputation: 386604

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; }

Upvotes: 2

Related Questions