json to key value array

Question

I have some json data, that looks like :

[{
"key": "Jan",
  "value": "400"
}, {
  "key": "Apr",
  "value": "500"
}, {
  "key": "Aug",
  "value": "24058.635"
}, {
  "key": "Sep",
  "value": "2160"
}, {
  "key": "Nov",
  "value": "115425"
}, {
  "key": "Dec",
  "value": "32570"
}]

I need to convert this to a key value pair array that should be like

[
  [Jan, 400],
  [Apr, 500],
  [Aug, 24058.635],
  [Sep, 2160],
  [Nov, 115425],
  [Dec, 32570]
]

Somebody please help me with Jquery or Javascript code to do this conversion.

Basically an exact duplicate of [How to use jQuery.map() on array of objects to return array of arrays](http://stackoverflow.com/q/4875649/218196), but jQuery is weird. — Felix Kling, Dec 14 '16 at 07:20
You should definitely read [Access / process (nested) objects, arrays or JSON](http://stackoverflow.com/q/11922383/218196) — Felix Kling, Dec 14 '16 at 07:35

score 3 · Answer 1 · answered Dec 14 '16 at 07:15

3

You can use map() function to iterate on them and return an array you want.

let json =  [{"key":"Jan","value":"400"},{"key":"Apr","value":"500"},{"key":"Aug","value":"24058.635"},{"key":"Sep","value":"2160"},{"key":"Nov","value":"115425"},{"key":"Dec","value":"32570"}];

let obj = json.map(item => [item['key'], item['value']]);

console.log(obj);

answered Dec 14 '16 at 07:15

Suren Srapyan

66,568
14
114
112

console is showing **json.map is not a function(…)** – AJIN Dec 14 '16 at 07:29
@AJIN, What look does your json obj has? In my case it is an array. If you have it like a string, then do `let json = JSON.parse(yourString)` and after that use map function – Suren Srapyan Dec 14 '16 at 07:30
I am processing the response from an ajax method. – AJIN Dec 14 '16 at 07:43
after parsing output is showing like **[Array[2], Array[2], Array[2], Array[2], Array[2], Array[2]]** – AJIN Dec 14 '16 at 07:49
Create a fiddle and show your code.Or for first make sure you get the `json` object as mine – Suren Srapyan Dec 14 '16 at 08:00
its working in fiddle..but the output is not showing in correct format. All keys and values get mixed up. – AJIN Dec 14 '16 at 08:03
It is the `alert` function output. Actually the `obj` contains the expected result – Suren Srapyan Dec 14 '16 at 08:18

Mahi · Answer 2 · 2016-12-14T07:21:04.067

1

with forEach method .

var a= [{"key":"Jan","value":"400"},{"key":"Apr","value":"500"},{"key":"Aug","value":"24058.635"},{"key":"Sep","value":"2160"},{"key":"Nov","value":"115425"},{"key":"Dec","value":"32570"}];
var ans=[];
a.forEach(function(a){
ans.push([a["key"],a["value"]]);
})
console.log(ans);

with map method .

var a= [{"key":"Jan","value":"400"},{"key":"Apr","value":"500"},{"key":"Aug","value":"24058.635"},{"key":"Sep","value":"2160"},{"key":"Nov","value":"115425"},{"key":"Dec","value":"32570"}];

var ans=a.map(function(a){
return [a["key"],a["value"]];
})
console.log(ans);

edited Dec 14 '16 at 07:21

answered Dec 14 '16 at 07:18

Mahi

1,707
11
22

both methods are showing output as : **[Array[2], Array[2], Array[2], Array[2], Array[2], Array[2]]** – AJIN Dec 14 '16 at 07:39
@AJIN `JSON.stringify(output)` only to show output as string . but keep output as it it . output is correct. – Mahi Dec 14 '16 at 08:31

score 1 · Answer 3 · answered Dec 14 '16 at 07:20

1

You could do something like this.

var input = [{
  "key": "Jan",
  "value": "400"
}, {
  "key": "Apr",
  "value": "500"
}, {
  "key": "Aug",
  "value": "24058.635"
}, {
  "key": "Sep",
  "value": "2160"
}, {
  "key": "Nov",
  "value": "115425"
}, {
  "key": "Dec",
  "value": "32570"
}];

var output = input.map(function(obj) {
  return [obj.key, obj.value]
});
console.log(output);

answered Dec 14 '16 at 07:20

Sreekanth

3,110
10
22

output is showing as **[Array[2], Array[2], Array[2], Array[2], Array[2], Array[2]]** – AJIN Dec 14 '16 at 07:55
if you would like to display it, you could use JSON.stringify(output). – Sreekanth Dec 14 '16 at 07:58
If you need to access, you should use output[someIndex][0] for Key and output[someIndex][1] for Value – Sreekanth Dec 14 '16 at 07:59
i am not accessing the data at any index. I am passing this output on to a function where a graph will be generated with this data. – AJIN Dec 14 '16 at 08:05

score 0 · Answer 4 · answered Dec 14 '16 at 17:04

Using Array map() method :

var jsonObj = [{
"key": "Jan",
  "value": "400"
}, {
  "key": "Apr",
  "value": "500"
}, {
  "key": "Aug",
  "value": "24058.635"
}, {
  "key": "Sep",
  "value": "2160"
}, {
  "key": "Nov",
  "value": "115425"
}, {
  "key": "Dec",
  "value": "32570"
}];

var newArr = jsonObj.map(function(item) {
  return [item['key'],item['value']];
});

console.log(newArr);

Using JavaScript for...in loop :

var jsonObj = [{
"key": "Jan",
  "value": "400"
}, {
  "key": "Apr",
  "value": "500"
}, {
  "key": "Aug",
  "value": "24058.635"
}, {
  "key": "Sep",
  "value": "2160"
}, {
  "key": "Nov",
  "value": "115425"
}, {
  "key": "Dec",
  "value": "32570"
}];

var newArr = [];
for (var i in jsonObj) {
  newArr.push([jsonObj[i].key,jsonObj[i].value]);
}

console.log(newArr);

json to key value array

4 Answers4