Utilizing Lodash to Manipulate an Array of Objects

Question

Utilizing Lodash to Manipulate an Array of Objects

I'm attempting to simplify a complex structure.
After much simplification, I have managed to reduce it to the following:

[
  {'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 expertise in lodash is insufficient and I seek assistance in transforming the above into this format:

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

^{Note that the number of keys may differ for each object. Some objects may only include the ID, while others may have more than the three keys shown in the example.}

javascript arrays object underscore.js lodash

Answer 1

Answer №1

If you were to write this in native JavaScript, you might utilize a pair of nested loops.

let 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' }] } }],
    simplified = data.map(function (item) {
        let object = {};
        item.Cells.Results.forEach(function (result) {
            object[result.Key] = result.Value;
        });
        return object;
    });

console.log(simplified);

Answer 2

If you were to write this in native JavaScript, you might utilize a pair of nested loops.

let 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' }] } }],
    simplified = data.map(function (item) {
        let object = {};
        item.Cells.Results.forEach(function (result) {
            object[result.Key] = result.Value;
        });
        return object;
    });

console.log(simplified);

Answer 3

Answer №2

Here is a Lodash approach to solving the problem:

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

Answer 4

Here is a Lodash approach to solving the problem:

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

Answer 5

Answer №3

Here's a code snippet that could work for your situation, although some may argue that plain JavaScript is just as effective:

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

Answer 6

Here's a code snippet that could work for your situation, although some may argue that plain JavaScript is just as effective:

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

Answer 7

Answer №4

Check out this different approach 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>

Answer 8

Check out this different approach 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>

Answer 9

Answer №5

Here is a different approach using map and reduce functions

    var startingArray=[
      {'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 mergeObjects(accumulator,current){
       accumulator[current['Key']]=current['Value'];
       return accumulator;  
     }

     function extractResults(obj){
       return obj.Cells.Results.reduce(mergeObjects,{});
     }

     var modifiedArray=_(startingArray).map(extractResults).value();
     console.log(modifiedArray);

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

Answer 10

Here is a different approach using map and reduce functions

    var startingArray=[
      {'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 mergeObjects(accumulator,current){
       accumulator[current['Key']]=current['Value'];
       return accumulator;  
     }

     function extractResults(obj){
       return obj.Cells.Results.reduce(mergeObjects,{});
     }

     var modifiedArray=_(startingArray).map(extractResults).value();
     console.log(modifiedArray);

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

Utilizing Lodash to Manipulate an Array of Objects

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Using user input to create conditional statements

Issue: Child Pages not found in Nuxt RoutingDescription: When navigating

The variable in my NodeJS code is persisting across multiple requests and not being reset as expected

Tips for transferring values from one array to another array using JavaScript

Laravel: The current configuration does not support the experimental syntax 'classProperties' at this time

Retrieving information from a nested .then callback

Trouble disabling specific days of the week in Meteor's Bootstrap3 datetimepicker

Merging JSON Array of Objects from Separate Http Services in Angular 8

Encountering issues with $.AJAX post in JavaScript, while successful in Advanced Rest Client

Exclude a specific tag from a div in JavaScript

The AJAX success callback function failed to execute in cases where the dataType was set to JSONP during Cross domain Access

What is the best way to incorporate the 'autoskip' functionality into chartjs?

What is the best way to retrieve all arrays within a JSON object?

Mocha maintains the integrity of files during testing

Refine the JSON data to only include the values you need

What is the method for importing the merge function from "lodash/merge" in TypeScript?

Warning triggered Grunt cancellation

Retrieve the value from a dictionary in Swift by utilizing an integer variable

What is the most effective way to append a new key-value pair to the end of an OrderedMap?

Creating an interactive dropdown menu in react.js