How can I convert this data structure to an array?

Question

I had this data

var list = {
        "data": [
            {
                "value": "58",
                "color": "red"
            },
            {
                "value": "45",
                "color": "blue"
            },
            {
                "value": "63",
                "color": "green"
            },
            {
                "value": "32",
                "color": "yellow"
            },
            {
                "value": "25",
                "color": "orange"
            }
        ]
    }

I want only values for array and color in one array.

`JSON.parse()` as outlined in this question: http://stackoverflow.com/questions/4935632/how-to-parse-json-in-javascript — Ben, Aug 05 '14 at 09:37
Do you want "value" and "color" as a 2 separate javascript array ? — Rajeesh V, Aug 05 '14 at 09:40
I don't understand what the data structure you want to get out of this is. — Quentin, Aug 05 '14 at 09:42

score 2 · Accepted Answer · answered Aug 05 '14 at 09:42

2

This will work cross-browser

var values = [];
var colors = [];

for (var i = 0; i < list.data.length; i++) {
    values.push(list.data[i].value);
    colors.push(list.data[i].color);

};

answered Aug 05 '14 at 09:42

Mritunjay

25,338
7
55
68

nice answer but beware of [cross-browser compatibility issues](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#Browser_compatibility) (IE8 and below mostly) – pomeh Aug 05 '14 at 09:46

score 0 · Answer 2 · answered Aug 05 '14 at 09:40

0

The code below should achieve if what i understand from your question is correct.

var colorArray = [];
var valueArray = [];

for(var i in list.data) {
  colorArray.push(list.data[i].color);
  valueArray.push(list.data[i].value);
}

answered Aug 05 '14 at 09:40

biplav

781
6
13

score 0 · Answer 3 · answered Aug 05 '14 at 09:41

0

You can use map() method of Array:

var values = list.data.map(function(item) { return item.value; });
var colors = list.data.map(function(item) { return item.color; });

answered Aug 05 '14 at 09:41

hindmost

7,125
3
27
39

nice answer but beware of [cross-browser compatibility issues](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Browser_compatibility) (IE8 and below mostly) and it may be better to loop over the array only once – pomeh Aug 05 '14 at 09:45
@pomeh And how you would implement such "once" loop with `map()`? – hindmost Aug 05 '14 at 09:49
I would use `forEach` instead of `map` in this case :) But there's still cross-browser compat issues – pomeh Aug 05 '14 at 09:51

score 0 · Answer 4 · answered Aug 05 '14 at 09:42

0

You can use this code:

 colors = [];
 values = [];
 list.data.forEach(function(val, key){ colors.push(val.color); values.push(val.value); })

answered Aug 05 '14 at 09:42

Omar Qunsul

46
1
3

How can I convert this data structure to an array?

4 Answers4