How to access nested JSON in JS?

Question

So I have this JSON struture that I have successfully passed into JS:

{
"StepOne": [
    {
        "id": "2",
        "type": "1",
        "description": "How are you feeling?",
        "options": [
            {
                "opt_id": "1",
                "opt_desc": "Good"
            },
            {
                "opt_id": "2",
                "opt_desc": "Perfect"
            },
            .... etc

It goes on until PageFive and the amount of questions vary from 1-4 in each step and the options vary from null to about 10 for each question. I want to use this information to generate a multi step form in Javascript, but I can not figure out how to access the inner data. I can only find "PageOne", "PageTwo" etc. I am using this following code to do that:

$(document).ready(function()
    {       
        $('#show-results').click(function() 
        {
            $.post('json.php', function(data) 
            {
                var pushedData = jQuery.parseJSON(data);


                $.each(pushedData, function(i, serverData)
                {
                    alert(i);
                })
            })
        })
    });

Now I have tried these functions to get to the inner values:

var desc = pushedData.PageOne.description;

var desc = pushedData['PageOne']['Description'];

And inside the each loop I've tried stuff like

var desc = PageOne.description;

var desc = PageOne['description'];

It all comes out as undefined. Is there a way to iterate through each of the questions in each Page the same way I have done to iterate through the pages? And from there rinse and repeat to iterate through the options for each question? If I could access each level I should be all set for generating a poll dynamically which is the ultimate goal here.

I think this code is on to something (found out right after I posted). Not quite working though.

$(document).ready(function()
    {       
        $('#show-results').click(function() 
        {
            $.post('JSAAN.php', function(data) 
            {
                var pushedData = jQuery.parseJSON(data);

                $.each(pushedData, function(i, stepData)
                {
                    $.each(stepData, function(j, questionData)
                    {
                      // Print question here
                           $.each(questionData, function(k, optionData)
                           {
                                // Print option here
                           })

                    })
                })
            })
        })
    });

You are trying to access PageOne but your example has StepOne... is that the problem? — James Allardice
– James Allardice, Commented Jul 17, 2012 at 9:11
Are you sure pushedData contains a correct JavaScript object? — Juri
– Juri, Commented Jul 17, 2012 at 9:12
Oh sorry, yeah. I changed the variable name for the example as I found out after making this that it's most commonly named as multi step not multi page. But that's not the problem. My bad — Vlad
– Vlad, Commented Jul 17, 2012 at 9:13

Christoph · Accepted Answer · 2012-07-17 09:50:03Z

2

It needs to be

jsonData.StepOne[0].description

since you have an additional [] array wrapper.

Depending on you structure, just omit the additional [], then you can access all the Object Properties directly, it should look like this:

{
"StepOne":
    {
        properties
    },
"StepTwo":
    {
        properties
    }
}

however, it's okay to have such a structure - now you have to write StepOne[x].prop

"StepOne":[
    {
        properties
    },
    {
        other props
    }],
 "StepTwo":[{...

According to the code you posted, this might be what you want, since you have several questions per step(?).

The simple loop looks like the following:

for (var key in o) {
  if (o.hasOwnProperty(key)) {
    console.log(key + " -> " + o[key]);
  }
}

A nested loop is more complicated though:

function loop(obj) {
    $.each(obj, function(key, val) {
        if($.isPlainObject(val) || $.isArray(val)) {

            console.log(key + " is an Object");
            // object or array -> call recursively
            loop(val);

        } else {
           // plain value
           console.log(key + "->" + val);
        }
    });
}

Take a look at this example.

edited Jul 17, 2012 at 9:50

answered Jul 17, 2012 at 9:20

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

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

5 Comments

Vlad Over a year ago

Any ideas on how to loop through it automatically with some sort of foreach or while (counter < length(this.options)) of some sort? I expanded my latest code snippet that probably illustrates what I am trying to do.

Vlad Over a year ago

Works like clockwork, just have to study it so I can identify what level I am currently on to provide proper printouts. Thanks a lot! :D Sorry for late appreciation but I went to lunch ;)

Vlad Over a year ago

if (key == "PageOne" || key == "PageTwo" || key == "PageThree" || key == "PageFour" || key == "PageFive" || key == "PageSix" || key == "PageSeven") { level++; document.write("<br/>Level "+ level +": " + key + "<br/>"); } ::::::::::::::::::::::::::::::::::::::::: if (key == "id") { document.write(val + "<br/>"); } Any idea why the first works but not the second?

Christoph Over a year ago

sure, id is a leaf and that's why the else branch is executed while you made the check in the if branch i guess?

Vlad Over a year ago

Oh my god I feel stupid now. Ofcourse it was that lol. This is my 3rd attempt to make this damned poll, the two first did not work as expected so now I am getting blind easily. thanks a lot. Made my day <3

LetterEh · Accepted Answer · 2012-07-17 09:18:25Z

1

Aside from the StepOne !== PageOne problem:

StepOne is an array, which holds an object.

That makes no sense to me, seeing as there should probably only be one step in StepOne... ...but that's just me.

So you'd have to go:

jsonData.StepOne[0].description;
jsonData.StepOne[0].options[0].opt_desc;
jsonData.StepOne[0].options[1].opt_desc;

et cetera...

answered Jul 17, 2012 at 9:18

LetterEh

26.8k5 gold badges45 silver badges52 bronze badges

3 Comments

Vlad Over a year ago

It's just that each step has several questions, so I had to find a way to link the questions up to each step. Will try this, looks promising

LetterEh Over a year ago

In that case, you might consider writing a function that pseudo-looks like: "for each step, for each question in step: current_question = Step[i]; for each option in current_question, current_option = current_question[j]: write_list_item / write_checkbox (current_option). In real life, it might be a little more involved, and I'd personally end up doing some recursion in there, to make life less painful, but if you think about what each "node" in the tree represents, it becomes easier to write out functions to deal with them.

Vlad Over a year ago

I did use recursion as showed in an answer show above, just strugglig with keeping track of my counting variables.

Collectives™ on Stack Overflow

How to access nested JSON in JS?

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related