Modify Keys in Array with Lodash

Question

I'm attempting to modify an array of objects with lodash, and struggling a bit. I would like to take the array below and change the keys in the objects.

Here is my source array:

[
    {
        "id": "AD",
        "name": "Andorra",
        "currency": "EUR",
        "timezone": "Europe/Andorra",
        "links": [
            {
                "rel": "self",
                "href": "http://localhost:8000/api/countries/AD"
            },
            {
                "rel": "country.currency",
                "href": "http://localhost:8000/api/currencies/EUR"
            }
        ]
    },
    {
        "id": "AE",
        "name": "United Arab Emirates",
        "currency": "AED",
        "timezone": "Asia/Dubai",
        "links": [
            {
                "rel": "self",
                "href": "http://localhost:8000/api/countries/AE"
            },
            {
                "rel": "country.currency",
                "href": "http://localhost:8000/api/currencies/AED"
            }
        ]
    },
    ...
    ]

I would like this to result in:

[
    {
        "value": "AD",
        "title": "Andorra",
        "currency": "EUR",
        "timezone": "Europe/Andorra",
        "links": [
            {
                "rel": "self",
                "href": "http://localhost:8000/api/countries/AD"
            },
            {
                "rel": "country.currency",
                "href": "http://localhost:8000/api/currencies/EUR"
            }
        ]
    },
    {
        "value": "AE",
        "title": "United Arab Emirates",
        "currency": "AED",
        "timezone": "Asia/Dubai",
        "links": [
            {
                "rel": "self",
                "href": "http://localhost:8000/api/countries/AE"
            },
            {
                "rel": "country.currency",
                "href": "http://localhost:8000/api/currencies/AED"
            }
        ]
    },
    ...
    ]

Note that the first two keys are renamed. I know I can use _.mapKeys to modify the keys, however I'm not sure how to iterate the array in the best way to do this.

Any suggestions would be much appreciated.

Iterate with map and run mapKeys on each iteration?

Dominik
– Dominik

2017-10-03 21:55:27 +00:00
Commented Oct 3, 2017 at 21:55 — Dominik
– Dominik, Commented Oct 3, 2017 at 21:55
great suggestions, thanks everyone

zag2010
– zag2010

2017-10-03 22:25:07 +00:00
Commented Oct 3, 2017 at 22:25 — zag2010
– zag2010, Commented Oct 3, 2017 at 22:25

Ori Drori · Accepted Answer · 2019-10-28 15:44:01Z

Iterate using Array#map (or lodash's _.map()), and use Object#assign (or _.assign()) to generate a new object with the change key.

Assign will meld an object with new keys with the respective values from the original object, and the original object without the keys you want to replace using _.omit().

var data = [{"id":"AD","name":"Andorra","currency":"EUR","timezone":"Europe/Andorra","links":[{"rel":"self","href":"http://localhost:8000/api/countries/AD"},{"rel":"country.currency","href":"http://localhost:8000/api/currencies/EUR"}]},{"id":"AE","name":"United Arab Emirates","currency":"AED","timezone":"Asia/Dubai","links":[{"rel":"self","href":"http://localhost:8000/api/countries/AE"},{"rel":"country.currency","href":"http://localhost:8000/api/currencies/AED"}]}];

var result = data.map(function(o) {
  return Object.assign({
    value: o.id,
    title: o.name
  }, _.omit(o, 'id', 'name'));
});

console.log(result);

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

Another option is to use _.mapKeys() to change the key names:

var data = [{"id":"AD","name":"Andorra","currency":"EUR","timezone":"Europe/Andorra","links":[{"rel":"self","href":"http://localhost:8000/api/countries/AD"},{"rel":"country.currency","href":"http://localhost:8000/api/currencies/EUR"}]},{"id":"AE","name":"United Arab Emirates","currency":"AED","timezone":"Asia/Dubai","links":[{"rel":"self","href":"http://localhost:8000/api/countries/AE"},{"rel":"country.currency","href":"http://localhost:8000/api/currencies/AED"}]}];

var keys = { id: 'value', name: 'title' };

var result = data.map(function(o) {
  return _.mapKeys(o, function(v, k) {
    return k in keys ? keys[k] : k;
  });
});

console.log(result);

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

Dominik · Accepted Answer · 2017-10-03 22:14:42Z

2

I prefer not to change the original data so this is what I would do:

const thing = [{id:"AD",name:"Andorra",currency:"EUR",timezone:"Europe/Andorra",links:[{rel:"self",href:"http://localhost:8000/api/countries/AD"},{rel:"country.currency",href:"http://localhost:8000/api/currencies/EUR"}]},{id:"AE",name:"United Arab Emirates",currency:"AED",timezone:"Asia/Dubai",links:[{rel:"self",href:"http://localhost:8000/api/countries/AE"},{rel:"country.currency",href:"http://localhost:8000/api/currencies/AED"}]}];

const newThing = [];

thing.map( item => {
    newThing.push(
        _.mapKeys( item, ( value, key ) => {
            let newKey = key;
            if( key === 'id' ) {
                newKey = 'value';
            }

            if( key === 'name' ) {
                newKey = 'title';
            }

            return newKey;
        })
    )
});

console.log( newThing );

edited Oct 3, 2017 at 22:14

answered Oct 3, 2017 at 22:08

Dominik

6,3239 gold badges44 silver badges63 bronze badges

1 Comment

Phoenix Over a year ago

Why you define a new List(newThing)? map return a new list itself

Sushanth -- · Accepted Answer · 2017-10-03 22:08:54Z

You can use _.map and create a new object, change the keys based on the condition and return the new object.

var obj = [{
  "id": "AD",
  "name": "Andorra",
  "currency": "EUR",
  "timezone": "Europe/Andorra",
  "links": [{
    "rel": "self",
    "href": "http://localhost:8000/api/countries/AD"
  }, {
    "rel": "country.currency",
    "href": "http://localhost:8000/api/currencies/EUR"
  }]
}, {
  "id": "AE",
  "name": "United Arab Emirates",
  "currency": "AED",
  "timezone": "Asia/Dubai",
  "links": [{
    "rel": "self",
    "href": "http://localhost:8000/api/countries/AE"
  }, {
    "rel": "country.currency",
    "href": "http://localhost:8000/api/currencies/AED"
  }]
}];

var updatedObj = _.map(obj, function(currObj, index) {
    var newObj = {};
    
    Object.keys(currObj).forEach(function(key) {
        if(key === 'id') {
    	     newObj.value = currObj[key];
    	  } else if(key === 'name') {
           newObj.name = currObj[key];
        } else {
           newObj[key] = currObj[key];
        }
    });
    return newObj;
});

console.log(updatedObj);

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

Collectives™ on Stack Overflow

Modify Keys in Array with Lodash

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related