JavaScript - Converting arrays to maps

Question

Given an array of objects:

var projects = [
    {
        id: 1,
        name: 'Trader Portal'
    },
    {
        id: 2,
        name: 'Risk Engine'
    },
];

What is the most elegant way of converting it into the following structure - essentially and array of the ids along with a map of the objects:

{
    projects: [
        1,
        2
    ],
    projectMap: {
        1: {
            id: 1,
            name: 'Trader Portal'
        },
        2: {
            id: 2,
            name: 'Risk Engine'
        }
    }
}

I did this using underscore (see below or my codepen), but is there a better way? For example can this be done in a more declarative way using functional programming? Is there a way to genericize the code to work on an array of any type of objects?

var projects = [
    {
        id: 1,
        name: 'Trader Portal'
    },
    {
        id: 2,
        name: 'Risk Engine'
    },
];

var result = {};

result.projects = _.map(projects, function(project) {
  return project.id;
});

result.projectMap = {};
_.each(projects, function(project) {
  result.projectMap[project.id] = project;
});

console.log(JSON.stringify(result));

Community · Accepted Answer · 2017-05-23 11:59:00Z

4

If you're just interested in the second example from @jeremija, then Ramda has a function built-in for this, indexBy, which you can use like this:

R.indexBy(R.prop('id'), projects);

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Jun 7, 2016 at 18:27

Scott Sauyet

50.9k5 gold badges57 silver badges111 bronze badges

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

2 Comments

Naresh Over a year ago

That's indeed short and sweet. Thanks for sharing, @ScottSauyet.

webNeat Over a year ago

This is actually the most functional way

jeremija · Accepted Answer · 2016-06-06 12:55:19Z

2

Using the new arrow functions, and the map & reduce Array methods, you can further simplify this:

var projects = [
    {
        id: 1,
        name: 'Trader Portal'
    },
    {
        id: 2,
        name: 'Risk Engine'
    },
];

var projectMap = {
    projects: projects.map(p => p.id),
    projectMap: projects.reduce((obj, p) => {
      obj[p.id] = p;
      return obj;
    }, {})
};

Or maybe having an array of IDs is not necessary as you can easily get just the keys:

var projectMap = projects.reduce((obj, p) => {
    obj[p.id] = p;
    return obj;
}, {});

var projectIds = Object.keys(projectMap);

edited Jun 6, 2016 at 12:55

answered Jun 6, 2016 at 12:50

jeremija

2,5581 gold badge21 silver badges28 bronze badges

Comments

vp_arth · Accepted Answer · 2016-06-06 12:59:55Z

1

VanillaJS implementation:

var result = {projectMap: {}};
result.projects = projects.map(p => p.id);
projects.forEach(p => {
  result.projectMap[p.id] = p;
});

Or even simpler with reduce:

result.projectMap = projects.reduce((c, p) => (c[p.id] = p, c), {});

We start here from empty hash {}, and extend carry(c) with new project(p) on each reduce iteration.

edited Jun 6, 2016 at 12:59

answered Jun 6, 2016 at 12:51

vp_arth

15k4 gold badges43 silver badges72 bronze badges

1 Comment

Naresh Over a year ago

love your answer! I wish I can mark both yours and jeremija's as correct - as they are both aiming at the same approach (just that the style is slightly different). However, given only one choice, I am marking jeremija's as correct for suggesting that I don't need the array of ids in the result - it can be derived from the map. However, I am upvoting your answer.

Collectives™ on Stack Overflow

JavaScript - Converting arrays to maps

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related