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!

Solution 1

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]};
});

Solution 2

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);

Solution 3

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);

Solution 4

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}))

Solution 5

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

---

View more solutions