Replace keys in an array of objects in javascript

Question

I want to replace the underscores in the object keys with spaces like USER_NAME to USER NAME. I tried the following but somehow it's not working.

var link = [{
  "USER_NAME": "abc",
  "USER_DOB": "10/25/1985",
}, {
  "USER_NAME": "xyz",
  "USER_DOB": "10/25/1986"
}];
var html = '';
for (var i = 0; i < link.length; i++) {
  var tableHeaders = Object.keys(link[i]);

  for (var j = 0; j < tableHeaders.length; j++) {
    var formattedStr = tableHeaders[j].replace(/_/g, ' ');
    Object.keys(link[i])[j] = formattedStr;
    html += Object.keys(link[i])[j] + ' -- ' + formattedStr + '<br /><br />';
  }
}

document.getElementById('test').innerHTML = html;

Link to JS Fiddle - https://jsfiddle.net/4ak6zjLd/3/

Could someone please let me know if I'm missing out on anything here?

Your fiddle works fine. Btw, you can do `tableHeaders[j].replace('_', ' ')` instead of splitting and rejoin it. — choz, Sep 03 '16 at 13:50
@choz No, fiddle does not work fine as I'm expecting both of them to be equal and without underscores. I guess replace will work for a single occurrence. If the key is like USER_NAME_SOMETHING, it will not work. — Ansuman, Sep 03 '16 at 13:54
You should have a look at this http://stackoverflow.com/questions/13391579/how-to-rename-json-key — Prateek Gupta, Sep 03 '16 at 13:55
Hi @melpomene, modified as per your suggestion. But this does not resolve the actual problem. — Ansuman, Sep 03 '16 at 14:09
@user2080056 Oh I get it, you're just confused why `Object.keys` does not reference the key of your object as you're replacing your object key by accessing with it. Well, your assumption is wrong. `Object.keys` are generating an array of string based of your object, so when you do update in `Object.keys`, it just simply updates the string array. If what you want is to replace the key in your actual object, I suggest to go with @PrateekGupta link. — choz, Sep 03 '16 at 14:17
Did any of the answers suit your needs? Could you accept one or leave a comment? — trincot, Sep 13 '16 at 18:08

score 3 · Answer 1 · answered Sep 03 '16 at 14:28

You could use this ES6 function to apply a replacement on all object keys:

function replaceKeys(obj, find, replace) {
  return Object.keys(obj).reduce (
    (acc, key) => Object.assign(acc, { [key.replace(find, replace)]: obj[key] }), {});
}
  
// sample data
var link = [{
  "USER_NAME": "abc",
  "USER_DOB": "10/25/1985",
}, {
  "USER_NAME": "xyz",
  "USER_DOB": "10/25/1986"
}];

// replace the underscores in each of the objects
link = link.map(obj => replaceKeys(obj, /_/g, ' '));

// output result
console.log(link);

score 0 · Answer 2 · answered Sep 03 '16 at 14:22

If I understand correctly, you want to update the object keys inside the original link array.

var link = [{
  "USER_NAME": "abc",
  "USER_DOB": "10/25/1985",
}, {
  "USER_NAME": "xyz",
  "USER_DOB": "10/25/1986"
}];
for (var i = 0; i < link.length; i++) {
  var tableHeaders = Object.keys(link[i]);

  // We create a fresh link object that will have formatted keys:
  var newLink = {}; 

  for (var j = 0; j < tableHeaders.length; j++) {
    var badKey = tableHeaders[j];
    var goodKey = badKey.replace(/_/g, ' ');
    newLink[goodKey] = link[i][badKey];
  }

  // Now we replace the original link item with the new one:
  link[i] = newLink; 
}

document.getElementById('test').innerHTML = JSON.stringify(link);

https://jsfiddle.net/4ak6zjLd/5/

Replace keys in an array of objects in javascript

2 Answers2