Trying to populate a list in JQuery from a JSON file. How to debug?

Question

So I have a JSON file I need to get Quiz questions from. For now, I am simply storing the questions in an array as an object. Each question object has 'text' (the question itself), 'choices' (an array of possible answers), and 'answer' (an int corresponding to the location of the correct answer choice).

How can I check that I'm storing the question objects correctly? I want to create a list of questions and I tried populating my list with questions[i].text and it didn't work. I installed Firebug to debug what was going on, but I am not entirely sure how to make the best use of it.

The JSON is in this format:

{
"text": "What does the author least like about Eclipse?", 
"choices": [
    "The plugin architecture.",
    "FindBugs.",
    "Refactoring.",
    "The Run As menu."],
"answer": 3
}

My JavaScript file:

$(document).ready(function(){

var questions=[];
$.getJSON('quiz.js',function(data){

     var i=0;
     for(i=0;i<data.length;i++){
        questions[i]=[String(data[i].text),String(data[i].choices),int(data[i].answer)];

    }

    var list = $('#list')
    $(questions).each(function(_, text) {
    var item = $('<li/>')
    var link = $('<a/>').html(text)
    link.click(function() { alert(text) })
    item.append(link)
    list.append(item)
    })

    $('#list').listview('refresh')


});
})

Finally, some HTML:

 <div data-role="content">
    <ul id="list" data-role="listview">
    </ul>
</div>

I know it's a long question but I really appreciate any help. The end goal is to have a list of questions that, when clicked, displays the answer choices and provides a toast to notify the user if the selected option is correct or not. I also want to highlight the question in the list in Green if answered correctly, and Red otherwise.

EDIT:

Working code:

$(document).ready(function(){

$.getJSON('quiz.js',function(data){

var questions = data;
var list = $('#list')

$(questions).each(function(index, object) {

 $.each(object, function(key, value){

    if(key === 'text'){
        //do something with qustion

            var item = $('<li/>')
            var link = $('<a/>').html(value)
            link.click(function() { alert(value) })
            item.append(link)
            list.append(item)
            $('#list').listview('refresh')
        }

      });
    });

  });
});

Solution

you're using each wrong for one. Number two you have to realize that you're getting an Object of Objects back in your JSON response. You need to iterate over each object that contains your question/answer data and further iterate over that question/answer object. Further you have an array nested in that nested Object and need to loop through that to get your questions. Take a look at some pseudo code:

//will give you each object your data
$.each(data, function(key, object){

    //do something with my [Object, Object]
    $.each(object, function(key, value){

        if(key === 'text'){
            //do something with qustion
        }

        if(key === 'choices'){
            //loop over array
        }
    }
}

Comments

[Amru E.]

I like what the fiddle is doing, but is it possible to store everything in one variable and iterate through it like that instead? Please see my code edit.

[Amru E.]

I tried playing with the fiddle but it doesn't work -- jsfiddle.net/R3dcw/4 any ideas? I'm not sure why it works for a single question object but suddenly when I give it the whole JSON file it fails.

[Corey Rowell]

updated fiddle look at the formatting for the data objects.

[Amru E.]

Please see my edit. You are right in that I can get a list that is full of [object Object], but when I add the second $.each I get a white page.

[Amru E.]

I ended up playing with this and got it working great. I posted my fixed code in the original question.