3

I have an array of objects like this:

[
  { "key": "fruit", "value": "apple" },
  { "key": "color", "value": "red" },
  { "key": "location", "value": "garden" }
]

I need to convert it to the following format:

[
  { "fruit": "apple" },
  { "color": "red" },
  { "location": "garden" }
]

How can this be done using JavaScript?

Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
Binson Eldhose
  • 749
  • 1
  • 6
  • 14
  • If you’re looking for a variant where the result is a single object with all properties merged: [How do I convert array of Objects into one Object in JavaScript?](/q/19874555/4642212). – Sebastian Simon Dec 01 '21 at 01:42

5 Answers5

18

You can use .map

var data = [
  {"key":"fruit","value":"apple"},
  {"key":"color","value":"red"},
  {"key":"location","value":"garden"}
];

var result = data.map(function (e) {
  var element = {};
  element[e.key] = e.value;
  
  return element;
});

console.log(result);

also if you use ES2015 you can do it like this

var result = data.map((e) => {
   return {[e.key]: e.value};
});

Example

Oleksandr T.
  • 76,493
  • 17
  • 173
  • 144
6

Using an arrow function, with the data called arr

arr.map(e => {
    var o = {};
    o[e.key] = e.value;
    return o;
});

This generates a new Array and does not modify the original

It can be simplified down to one line as

arr.map(e => ({[e.key]: e.value}));

If you can't assume arrow function support yet, you would write this longhand

arr.map(function (e) {
    var o = {};
    o[e.key] = e.value;
    return o;
});
Paul S.
  • 64,864
  • 9
  • 122
  • 138
  • 1
    @TrueBlueAussie Nope, arrow functions: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions – Rory McCrossan Jan 12 '16 at 12:55
  • 1
    Arrow functions are ES6, so make sure that your platform supports ES6. – apxp Jan 12 '16 at 12:56
  • @AlexK. according to MDN it should in Safari and IE9 and greater. I haven't tested personally though. If you have to support – Rory McCrossan Jan 12 '16 at 12:57
  • @RoryMcCrossan As of today (2016-01-12), [**all versions of IE below 11 have reached end of life**](https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support) – Paul S. Jan 12 '16 at 13:00
1

Using map (as suggested in other answers) or the following will do what you want...

var data = [{"key":"fruit","value":"apple"},{"key":"color","value":"red"},{"key":"location","value":"garden"}];
var obj = {};

for(var i = 0; i < data.length; i++) {
  obj[data[i]["key"]] = data[i]["value"];
}
Matthew Layton
  • 39,871
  • 52
  • 185
  • 313
1

In Javascript, obj.property and obj['property'] return same things. obj['property'] is more flexible because the key 'property' could be a string with some space :

obj['pro per ty'] // work
obj.pro per ty // not work

or

var a = 'property';
obj.a == obj.property // => false
obj[a] == obj.property // => true

So you could try that.

var data = [{"key":"fruit","value":"apple"},{"key":"color","value":"red"},{"key":"location","value":"garden"}]
var new_data = [];

var data_length = data.length; // just a little optimisation for-loop
for (var i = 0; i < data_length; i++) {
    var item = data[i]; // to have a vision close of foreach-loop (foreach item of collection)
    new_data[i] = {};
    new_data[i][item.key] = item.value;
}
console.log(new_data);
// [{"fruit":"apple"},{"color":"red"},{"location":"garden"}]
Le Petit Monde de Purexo
  • 318
  • 3
  • 6
0

What you currently have is an array of object, each having two attributes, key and value. If you are not aware of map, you can always run a forEach loop on this array and rearrange the data. Try something like below:

  function() {
     var newArray = [];
     oldArray.forEach(function(x){
     var obj= {};
     obj[x.key] = x.value;
     newArray.push(obj);
    });
  console.log(newArray);
}

here oldArray is your original data

Saurabh Tiwari
  • 4,632
  • 9
  • 42
  • 82