Rename Object Key in an array using javascript

Question

In my angular application i am getting an Json Data like below.

[{"id":"5","name":"Immidiate"},
{"id":"4","name":"30 days"},
{"id":"3","name":"21 days"},
{"id":"2","name":"14 days"},
{"id":"1","name":"7 days"},
{"id":"6","name":"Custom"}]

I need an output like below,

[{"Name":"5","Data":"Immidiate"},
{"Name":"4","Data":"30 days"},
{"Name":"3","Data":"21 days"},
{"Name":"2","Data":"14 days"},
{"Name":"1","Data":"7 days"},
{"Name":"6","Data":"Custom"}]

Here is my code

$rootScope.DashboardData["Name"] =  widget.seriesname ;
delete $rootScope.DashboardData[widget.seriesname];                
$rootScope.DashboardData["data"] =  widget.dataname ;
delete $rootScope.DashboardData[widget.seriesname];
widget.chartSeries = $rootScope.DashboardData;

where widget.seriesname is "id" and widget.dataname is "name".

Problem: Key is not changed!

eladcon · Accepted Answer · 2015-03-12 10:35:54Z

18

Use the map function:

var array = [{"id":"5","name":"Immidiate"},
{"id":"4","name":"30 days"},
{"id":"3","name":"21 days"},
{"id":"2","name":"14 days"},
{"id":"1","name":"7 days"},
{"id":"6","name":"Custom"}];

var resultArray = array.map(function(elm) {
   return { Name: elm[widget.seriesname], Data: elm[widget.dataname]};
});

edited Mar 12, 2015 at 10:35

answered Mar 12, 2015 at 10:19

eladcon

5,8251 gold badge18 silver badges19 bronze badges

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

4 Comments

eladcon Over a year ago

the new keys are in the object your return inside the map function ("Name","Data")

Sajeetharan Over a year ago

so i should pass inside this method one by one element?

eladcon Over a year ago

no its the entire array. look at my edit, your output is the resultArray variable

Sajeetharan Over a year ago

now i have id and name in a variable. so how can i get the value without hardcoding the id and name?

Nditah · Accepted Answer · 2019-02-27 10:01:49Z

11

const arr = [{"id":"5","name":"Immidiate"},
{"id":"4","name":"30 days"},
{"id":"3","name":"21 days"},
{"id":"2","name":"14 days"},
{"id":"1","name":"7 days"},
{"id":"6","name":"Custom"}];

const resultArray = arr.map(elm => ({ Name: elm.id, Data: elm.name}));

console.log(resultArray);

answered Feb 27, 2019 at 10:01

Nditah

1,88726 silver badges28 bronze badges

Comments

royse41 · Accepted Answer · 2015-03-12 10:29:54Z

EDIT: Just seen your angular tag - use angular's forEach:

var out = [];

angular.forEach(data, function (obj) {
    out.push({
        Name: obj.id,
        Data: obj.name
    });
});

Without angular:

For modern browsers, use array.map:

var out = data.map(function (obj) {
   return {
        Name: obj.id,
        Data: obj.name
    };
});

console.log(out);

And in older browsers:

var data = [{"id":"5","name":"Immidiate"},
           {"id":"4","name":"30 days"},
           {"id":"3","name":"21 days"},
           {"id":"2","name":"14 days"},
           {"id":"1","name":"7 days"},
           {"id":"6","name":"Custom"}];

var out = [];

for (var key in data) {
    if (data.hasOwnProperty(key)) {
        out.push({
            'Name': data[key].id,
            'Data': data[key].name
        });
    }
}

console.log(out);

Artur Carvalho · Accepted Answer · 2021-02-17 18:32:57Z

2

You could also do this:

arr.map(({id, name}) =>({name: id, data:name}))

const objArr = [
    { id: "5", name: "Immidiate" },
    { id: "4", name: "30 days" },
    { id: "3", name: "21 days" },
    { id: "2", name: "14 days" },
    { id: "1", name: "7 days" },
    { id: "6", name: "Custom" },
  ];

objArr.map(({id, name}) =>({name: id, data:name}))

answered Feb 17, 2021 at 18:32

Artur Carvalho

7,20711 gold badges80 silver badges116 bronze badges

2 Comments

dlauzon Over a year ago

Interesting. Since the map function didn't explicitly describe the syntax with {id, name}, I had to dig a bit: It's a general javascript feature (not just for map) called "Object destructuring".

Artur Carvalho Over a year ago

Indeed, I wrote a little bit about that with some questions here: coderanx.com/javascript/…

Maxim Shoustin · Accepted Answer · 2015-03-12 10:26:25Z

1

You can also use Underscopre.js map method:

$scope.newList = _.map(list, function(item) {
 return { Name: item.id, Data: item.name};
});

See Example in Fiddle

answered Mar 12, 2015 at 10:26

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Comments

ninja · Accepted Answer · 2019-12-30 18:38:25Z

1

var books = {
  "mainKey1": {
    "History" : [
      {"hai" : "hello"},
      {"hai" : "bye"}
    ],
    "tempKey" : "tempValue"
  },
  "mainKey2":{
    "Number": "AD-3424",
    "Number1": "AD-3424"
  },
  "temparr" : [
    "ai",
    "bi"
  ]

};

function replaceKeys(books,replacementkeys,newKeyJson) {
  if(typeof books == 'object') {    
    newKeyJson = Object.keys(books).map((book) => {
      if(typeof books[book] == 'object' || Array.isArray(books[book]) ) {
        replaceKeys(books[book],replacementkeys,newKeyJson[book])
      }
      if(replacementKeys[book]) {
          newKeyJson[replacementKeys[book]] = books[book];          
          delete newKeyJson[book];          
      }
    })

  }
  else if(Array.isArray(books)) {
   for( var i=0;i< books.length;i++) {
        replaceKeys(books[i],replacementkeys,newKeyJson[i]);
   }
  }else if(typeof books == 'string') {
    return;
  }else {
    return;
  }
}

var replacementKeys = {"History" : "replaced History","hai" : "hi","Number" : "test","Number1" : "test2","mainKey1" :"sidekey","tempKey" : "realKey","mainKey2" :"side2"};
var newKeyJson = Object.assign({},books);
replaceKeys(books,replacementKeys,newKeyJson);
console.log(newKeyJson); //this will contain object with updated keys

answered Dec 30, 2019 at 18:38

ninja

336 bronze badges

1 Comment

Jawad Over a year ago

please provide info in terms of how it helps answer the question

Collectives™ on Stack Overflow

Rename Object Key in an array using javascript

6 Answers 6

4 Comments

Comments

Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related