Mapping array to object using spread

Question

I would like to transform the follow array into a slightly modified object (see below). I'm also trying to practice using the spread operator, but haven't been able to figure out how to do it. I'm trying to avoid using lodash (for educational purposes).

Starting array:

var arr = [
    { mainkey: 'John', val1: 'ABC', val2: '..', val3: '..' },
    { mainkey: 'Mary', val1: 'DEF', val2: '..', val3: '..' },
    { mainkey: 'Ann', val1: 'XYZ', val2: '..', val3: '..' }
  ];

to final object:

newObj = {
  John: {val1: 'ABC', val2: '..', val3: '..' },
  Mary: {val1: 'DEF', val2: '..', val3: '..' },
  Ann:  {val1: 'XYZ', val2: '..', val3: '..' }
}

Without using the spread operator, this gets close, but not where I need to be:

var result = arr.reduce(function(map, obj) {
    map[obj.mainkey] = obj.val1;
    // map[obj.mainkey] = { obj.val1, obj.val2 }; <-- DOESNT WORK
    return map;
}, {});

With the spread operator anything I do fails.

Short answer

const newObj = arr.reduce(
    (acc, { mainkey, ...rest }) => ({ ...acc, [mainkey]: rest }),
    {}
  )

Explained

We're calling Array.prototype.reduce(), and for each object within the array, deconstructing mainkey from the rest of the properties (so mainkey could be John andrest could be something like this: {val1: 'ABC', val2: '..', val3: '..' }.

Then, we want to return the accumulator with a deep change, so we use the spread operator, followed by setting the the interploated mainkey property ([mainkey]) to be rest.

answered Sep 19, 2017 at 1:34

Guy Waldman

4573 silver badges13 bronze badges

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

1 Comment

Campo Blanco Over a year ago

Thank you for the explanation with it @guy, that helps a lot (especially since I was trying this for educational purposes, even though it's needed for my app as well)

panghea · Accepted Answer · 2017-09-19 05:34:10Z

1

simply change to..

    var result = arr.reduce(function(map, obj) {
        map[obj.mainkey] = {
            val1: obj.val1,
            val2: obj.val2,
        };
        return map;
    }, {});

UPDATE: add other dynamic version.

var result = arr.reduce(function(map, obj) {
    let targetProps = Object.getOwnPropertyNames(obj).filter(
        (prop) => prop !== "mainkey"
    );
    map[obj.mainkey] = {};
    targetProps.forEach( (prop) => {
        map[obj.mainkey][prop] = obj[prop];
    });
    return map;
}, {});

edited Sep 19, 2017 at 5:34

answered Sep 19, 2017 at 1:35

panghea

3132 silver badges8 bronze badges

4 Comments

Campo Blanco Over a year ago

Thank you @panghea for showing how to adapt my original!

Campo Blanco Over a year ago

If you're interested in helping me complete this version of it: how would you deal with having 10+ values without having to spell them all out (or a dynamic amount?)

panghea Over a year ago

add a dynamic version :)

Campo Blanco Over a year ago

You're so awesome!

Collectives™ on Stack Overflow

Mapping array to object using spread

2 Answers 2

Short answer

Explained

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Short answer

Explained

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related