Trying to access array returns undefined

Question

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?

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
– zmii, Commented Jun 8, 2015 at 18:37

Namit Singal · Accepted Answer · 2015-06-08 18:51:23Z

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

edited Jun 8, 2015 at 18:51

answered Jun 8, 2015 at 18:41

Namit Singal

1,51612 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Christian4423 Over a year ago

Okay, no that did what I needed it to. What if I wanted to dig deeper and access the colors object as well?

Christian4423 Over a year ago

Okay, I did that too console.log(data['rows'][key]['colors'])

Namit Singal Over a year ago

yup, loop through the colours like that using $.each again, @Christian4423 does this work?

Christian4423 Over a year ago

Wow. It's golden. Thank you so much!

Gyt Dau · Accepted Answer · 2015-06-08 18:54:19Z

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?

edited Jun 8, 2015 at 18:54

answered Jun 8, 2015 at 18:42

Gyt Dau

1008 bronze badges

1 Comment

Christian4423 Over a year ago

The first one returns undefined still :/

Community · Accepted Answer · 2020-06-20 09:12:55Z

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"
            }
        }
    ]
}

Collectives™ on Stack Overflow

Trying to access array returns undefined

3 Answers 3

4 Comments

1 Comment

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

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related