Mapping an array of objects to key/value pairs in CoffeeScript

Question

I have an array of elements that I would like to apply a mapping to to convert it into key value pairs on a single object (to mimic an associative array).

The approach in Can destructuring assignment be used to effect a projection in CoffeeScript? does not seem to work for me as it results in a simple array instead of key/value pairs.

My language of choice is CoffeeScript or JavaScript.

An example:

[{name: 'a', value: 'b', other: 'c'}, {name: 'd', value: 'e', other: 'f'}]

is supposed to be transformed into:

{
  a: 'b',
  d: 'e'
}

One-liners are preferred. ;-)

Suggest you make an example in pure coffeescript without the jquery dependency; something that can be tested on it's own. If you then do not figure it out, maybe the rest of us can. — Marius Kjeldahl
– Marius Kjeldahl, Commented Dec 1, 2011 at 21:41
Matt McDonald: Agreed. Still, if there is a clear one-liner I tend to use that one instead of a multi-statement solution. IMHO, the reduce approach qualifies (even though it requires a utility method). — Thilo-Alexander Ginkel
– Thilo-Alexander Ginkel, Commented Dec 1, 2011 at 23:00

Zirak · Accepted Answer · 2011-12-02 11:58:57Z

80

var arr = [{name: 'a', value: 'b', other: 'c'}, {name: 'd', value: 'e', other: 'f'}];

var obj = arr.reduce(function ( total, current ) {
    total[ current.name ] = current.value;
    return total;
}, {});

Pure javascript. It's practically a one liner, and it looks hawt.

Array.prototype.reduce is ES5, but isn't difficult to shim. Here's an example shim:

Array.prototype.reduce = function ( fun, initVal ) {
    var sum = initVal || this[ 0 ],
        i = 1, len = this.length;

    do {
        sum = fun.call( undefined, sum, this[i], i, this );
    } while ( ++i < len );

    return sum;
};

arr.reduce is a sophisticated version of arr.map, which is a sophisticated version of arr.forEach. You can do this for the same effect:

var obj = {};
arr.forEach(function ( val ) {
    obj[ val.name ] = val.value;
});

//and using jQuery.each
var obj = {};
$.each( arr, function ( index, val ) {
    obj[ val.name ] = val.value;
});

//latter version in coffeescript:
obj = {}
$.each( arr, (index, val) ->
    obj[ val.name ] = val.value
)

edited Dec 2, 2011 at 11:58

answered Dec 1, 2011 at 22:19

Zirak

40k13 gold badges85 silver badges92 bronze badges

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

5 Comments

Thilo-Alexander Ginkel Over a year ago

Are you certain that the initialization of i is correct? If there is an initVal and only a single array element, fun is never called.

Ricardo Tomasi Over a year ago

@Zirak that's nice. obj = arr.reduce ((o, item) -> o[item.name] = item.value; o), {} in coffeescript.

Ricardo Tomasi Over a year ago

@Thilo-AlexanderGinkel this is a nice dependable collection of shims: github.com/kriskowal/es5-shim

Zirak Over a year ago

@Thilo-AlexanderGinkel Nice catch. Fixed and added alternatives.

Isaac Over a year ago

Somewhat old, but you can simplify the js version to arr.reduce(function ( total, current ) { return total[ current.name ] = current.value, total }, {})

Ricardo Tomasi · Accepted Answer · 2011-12-02 00:08:09Z

19

values = {}
values[name] = value for {name, value} in arr

or in javascript:

var values = {}
arr.forEach(function(o){
    values[o.name] = o.value
})

Which is almost exactly what the CoffeeScript one compiles to.

answered Dec 2, 2011 at 0:08

Ricardo Tomasi

35.3k2 gold badges58 silver badges66 bronze badges

Comments

Tieme · Accepted Answer · 2017-05-15 18:16:55Z

13

Or using plain ES6:

const old = [
  {name: 'a', value: 'b', other: 'c'}, 
  {name: 'd', value: 'e', other: 'f'}
]

const transformed = Object.assign(
  {}, 
  ...old.map(({name, value}) => ({ [name]: value }))
);

console.log(transformed);

answered May 15, 2017 at 18:16

Tieme

66.1k22 gold badges111 silver badges159 bronze badges

3 Comments

httpete Over a year ago

this is a hot one liner - but can you explain this part? old.map(({name, value}) => ({ [name]: value })) what is the => ( ) doing? It is returning a key value pair with a variable name, but I don't get the () or the [] part.

Tieme Over a year ago

It's returning a key value pair with indeed a variable key, being always the name value and the value being the value value of the old objects. So it returns {a: 'b'} which will be assigned to the empty object. Clear?

Jason Sperske Over a year ago

I spent so much time looking for what I now understand is called computed property names ({[key]: value}), this answer was the clue I needed to finally know what to search for. Thank you!

Jonathan Lonowski · Accepted Answer · 2011-12-01 22:28:56Z

11

To fix the syntax error, you'll have to expand { @name: @value } to:

o = {}; o[@name] = @value; o

You can then merge the objects with $.extend() and a splat (with the empty object to avoid accidentally extending jQuery):

$.extend {}, $(row).children('input').map(() -> o = {}; o[@name] = @value; o)...

Though, a simpler option would be just to use a 2-liner:

result = {}
$(row).children('input').each(() -> result[@name] = @value)

edited Dec 1, 2011 at 22:28

answered Dec 1, 2011 at 21:51

Jonathan Lonowski

124k35 gold badges203 silver badges202 bronze badges

1 Comment

xaxxon Over a year ago

and if you REALLY must, you can throw the initialization into the callback (result?={})[@name]...

Onato · Accepted Answer · 2016-03-07 03:44:50Z

6

Using Array.prototype.reduce():

var arrayOfObjects = [
              {name: 'a', value: 'b', other: 'c'}, 
              {name: 'd', value: 'e', other: 'f'}
            ];

arrayOfObjects.reduce(function(previousValue, currentValue, currentIndex) {
  previousValue[currentValue.name] = currentValue.value;
  return previousValue;
}, {})

answered Mar 7, 2016 at 3:44

Onato

10.2k5 gold badges49 silver badges55 bronze badges

Comments

ducaale · Accepted Answer · 2018-07-09 18:05:41Z

2

ES6 one-liner:

const data = [{name: 'a', value: 97}, {name: 'b', value: 98}]

data.reduce((obj, e) => ({...obj, [e.name]: e.value}), {})

answered Jul 9, 2018 at 18:05

ducaale

6558 silver badges19 bronze badges

Comments

rwitzel · Accepted Answer · 2013-04-14 18:14:48Z

1

Have a look at http://coffeescriptcookbook.com/chapters/arrays/creating-a-dictionary-object-from-an-array

  myArray = [{name: 'a', value: 'b', other: 'c'}, {name: 'd', value: 'e', other: 'f'}]
  dict = {}
  dict[obj['name']] = obj['value'] for obj in myArray when obj['name']?
  console.log(JSON.stringify(dict, 0, 2));

This produces exactly what you want.

answered Apr 14, 2013 at 18:14

rwitzel

1,86020 silver badges24 bronze badges

Collectives™ on Stack Overflow

Mapping an array of objects to key/value pairs in CoffeeScript

7 Answers 7

5 Comments

Comments

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

Comments

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related