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. ;-)

Answer 1

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
)

Answer 2

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.

Answer 3

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)

Answer 4

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

Answer 5

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

Answer 6

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.

Answer 7

ES6 one-liner:

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

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