Transforming array of objects using Lodash

Question

I'm trying to simplify a convoluted structure.
I've simplified it as much as I can and have reduced it to this:

[
  {'Cells':{'Results':[
                        {'Key':'ID','Value':123},
                        {'Key':'Color','Value':'Red'},
                        {'Key':'Direction','Value':'West'}
                      ]}},
  {'Cells':{'Results':[
                        {'Key':'ID','Value':456},
                        {'Key':'Color','Value':'Green'},
                        {'Key':'Direction','Value':'East'}
                      ]}}
]

My lodash is skills are lacking and I need help turning the above into this:

[
  {'ID':123, 'Color':'Red', 'Direction':'West'},
  {'ID':456, 'Color':'Green', 'Direction':'East'}
]

^{I should note that the number of keys vary by object by the way. At a minimum, it could have just the ID, but some might have more than those three in the example.}

Nina Scholz · Accepted Answer · 2016-07-05 14:09:15Z

3

In plain Javascript, you could use two nested loop for it.

var array = [{ 'Cells': { 'Results': [{ 'Key': 'ID', 'Value': 123 }, { 'Key': 'Color', 'Value': 'Red' }, { 'Key': 'Direction', 'Value': 'West' }] } }, { 'Cells': { 'Results': [{ 'Key': 'ID', 'Value': 456 }, { 'Key': 'Color', 'Value': 'Green' }, { 'Key': 'Direction', 'Value': 'East' }] } }],
    condensed = array.map(function (a) {
        var o = {};
        a.Cells.Results.forEach(function (b) {
            o[b.Key] = b.Value;
        });
        return o;
    });

console.log(condensed);

answered Jul 5, 2016 at 14:09

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

Comments

Gruff Bunny · Accepted Answer · 2016-07-05 14:29:53Z

1

A solution using Lodash:

var result = _.chain(data)
    .map('Cells.Results')
    .map(res => _.zipObject(_.map(res,"Key"), _.map(res,"Value")))
    .value();

answered Jul 5, 2016 at 14:29

Gruff Bunny

28k10 gold badges74 silver badges61 bronze badges

Comments

asenovm · Accepted Answer · 2016-07-05 14:14:30Z

1

Something like this should do (although I'm not sure that it's better than plain javascript)

_.chain(array)
 .pluck('Cells')
 .pluck('Results')
 .map(function (value) { return _.object(_.map(value, _.values)); })
 .value()

answered Jul 5, 2016 at 14:14

asenovm

6,5373 gold badges45 silver badges53 bronze badges

2 Comments

Katie Over a year ago

This doesn't output the correct format unfortunately. Each array object only has the last key in it with no value (???)

asenovm Over a year ago

For the sample input you provided the above code outputs exactly what you gave.

ryeballar · Accepted Answer · 2016-07-05 15:15:56Z

Here's another alternative using lodash fp.

var result = map(compose(
  mapValues('Value'),
  keyBy('Key'),
  iteratee('Cells.Results')
))(data);

var data = [{
  'Cells': {
    'Results': [{
      'Key': 'ID',
      'Value': 123
    }, {
      'Key': 'Color',
      'Value': 'Red'
    }, {
      'Key': 'Direction',
      'Value': 'West'
    }]
  }
}, {
  'Cells': {
    'Results': [{
      'Key': 'ID',
      'Value': 456
    }, {
      'Key': 'Color',
      'Value': 'Green'
    }, {
      'Key': 'Direction',
      'Value': 'East'
    }]
  }
}];

var { compose, map, iteratee, keyBy, mapValues } = _;

var result = map(compose(
  mapValues('Value'),
  keyBy('Key'),
  iteratee('Cells.Results')
))(data);

document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');

<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.fp.js"></script>

kingd9 · Accepted Answer · 2016-07-05 16:06:53Z

Yet another answer, using map and reduce

    var initial_array=[
      {'Cells':{'Results':[
                        {'Key':'ID','Value':123},
                        {'Key':'Color','Value':'Red'},
                        {'Key':'Direction','Value':'West'}
                      ]}},
      {'Cells':{'Results':[
                        {'Key':'ID','Value':456},
                        {'Key':'Color','Value':'Green'},
                        {'Key':'Direction','Value':'East'}
                      ]}}
    ];

     function mergeObj(accumulator,current){
       accumulator[current['Key']]=current['Value'];
       return accumulator;  
     }

     function getResults(obj){
       return obj.Cells.Results.reduce(mergeObj,{});
     }

     var transformed_array=_(initial_array).map(getResults).value();
     console.log(transformed_array);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>

Collectives™ on Stack Overflow

Transforming array of objects using Lodash

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related