3

I thought I was doing this correct but this might be a total noob mistake.

Here is my JSON data

{
"rows": {
    "row1": {
        "divs": 7,
        "offset": 0,
        "colors": {
            "color1": "#003366",
            "color2": "#336699",
            "color3": "#3366CC",
            "color4": "#003399",
            "color5": "#000099",
            "color6": "#0000CC",
            "color7": "#000066"
        }
    },
    "row2": {
        "divs": 8,
        "offset": 11,
        "colors": {
            "color1": "#006666",
            "color2": "#006699",
            "color3": "#0099CC",
            "color4": "#0066CC",
            "color5": "#0033CC",
            "color6": "#0000FF",
            "color7": "#3333FF",
            "color8": "#333399"
        }
    },
    "row3": {
        "divs": 9,
        "offset": 22,
        "colors": {
            "color1": "#669999",
            "color2": "#009999",
            "color3": "#33CCCC",
            "color4": "#00CCFF",
            "color5": "#0099FF",
            "color6": "#0066FF",
            "color7": "#3366FF",
            "color8": "#3333CC",
            "color9": "#666699"
        }
    }
}
}

I saved it to a file and pushed it into an array like this 

var colorPicker = []

$(function () {
$.getJSON("js/json/colorPicker.json", function (data) {
    colorPicker.push(data)
});
})

Now I am trying to access this array. I can get into it doing colorPicker[0] That will return the whole object. 

Object {rows: Object}

When I do colorPicker[0].rows it will return the 3 rows

Object {row1: Object, row2: Object, row3: Object}

But when I do colorPicker[0][1] shouldn't that give me just one the rows? I keep on getting undefined.

When I do colorPicker[0].rows.row1 Then I can access my values from there. But if I want to use a for each loop it would be easier to do something like colorPicker[0][1].divs, wouldent it? Am I approaching this wrong?

Christian4423
  • 1,746
  • 2
  • 15
  • 25
  • 1
    `colorpicker[0].rows.row1` – BillPull Jun 08 '15 at 18:34
  • `data` is of `Object` type Object {rows: Object} To access the value of the Object you need to specify the key. If you will specify colorPicker[0]["row1"] You will get you result. Now, how to iterate the object? With Array you know that the keys are integers, so you change integers in the loop. Objects keys are a bit different, keys there you may get by var keys = Object.key(colorPicker[0]); – zmii Jun 08 '15 at 18:37

3 Answers3

2

Since its an object you cannot go by indexes 0,1,2, instead you need to give the name of the key, So if you want to iterate through all of the keys inside the object, you could do something like this :-

$.each(colorPicker[0]['rows'], function(key){
    console.log(colorPicker[0]['rows'][key]); // replace it with whatever you want to do with the row, key=row1/row2/row3
    console.log(colorPicker[0]['rows'][key].divs);
    //for getting all colors
    var temp = colorPicker[0]['rows'][key]["colors"];
    $.each(temp, function(key1){
        console.log(temp[key1]);
    });
});
Namit Singal
  • 1,506
  • 12
  • 26
0

You've named each row by the string "row1", "row2", "row3", etc.

To access them, you should actually use colorPicker[0]["row1"] or colorPicker[0].row1 - but the first option can be done programmatically - in a loop.

I also think you're converting it incorrectly. Did you try jQuery.parseJSON instead?

Gyt Dau
  • 100
  • 8
0

Use a JSON formatter/validation tool to validate that your JSON is what you think it is.

If you want array access you have to use an array: "rows" : [] is an array, "rows" : {} is an object/map:

{
    "rows": [
        {
            "divs": 7,
            "offset": 0,
            "colors": {
                "color1": "#003366",
                "color2": "#336699",
                "color3": "#3366CC",
                "color4": "#003399",
                "color5": "#000099",
                "color6": "#0000CC",
                "color7": "#000066"
            }
        },
        {
            "divs": 8,
            "offset": 11,
            "colors": {
                "color1": "#006666",
                "color2": "#006699",
                "color3": "#0099CC",
                "color4": "#0066CC",
                "color5": "#0033CC",
                "color6": "#0000FF",
                "color7": "#3333FF",
                "color8": "#333399"
            }
        },
        {
            "divs": 9,
            "offset": 22,
            "colors": {
                "color1": "#669999",
                "color2": "#009999",
                "color3": "#33CCCC",
                "color4": "#00CCFF",
                "color5": "#0099FF",
                "color6": "#0066FF",
                "color7": "#3366FF",
                "color8": "#3333CC",
                "color9": "#666699"
            }
        }
    ]
}
Community
  • 1
  • 1