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

Question

So, I have a JSON file from which I need to get Quiz questions. At the moment, I'm just storing questions in an array as an object. Each question object has a "text" (the question itself), a "choice" (an array of possible answers) and an "answer" (int corresponding to the location of the correct choice of answer).

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

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 this is a long question, but I really appreciate any help. The ultimate goal is to have a list of questions that when clicked displays the answer options and gives 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 you answer correctly, and Red - otherwise.

EDIT:

Work 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') } }); }); }); }); 

Answer 1

you use each incorrectly for one. The second number you should understand is that you are returning an object of objects back to the JSON response. You need to iterate over each object that contains your question / answer data, and continue iterating over this question / answer object. In addition, you have an array nested in this nested object, and you need to go through it 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 } } } 

Answer 2

try it.

 var ques=[]; $.getJSON('quiz.js',function(data){ for(var i in data) { var text =data[i].text; var choic=data[i].choices; var output='<li>'+text+'</li>'; } $('#list').empty().append(output); }); 

Answer 3

Do you really iterate through so many options when you get to it? here is the violin

You either need to use the $.each found in jQuery, or if you want to use pure javascript

 for (property in object) { if (object.hasOwnProperty(property)) { // do stuff } } 

Answer 4

As far as I understand: questions is an array of several elements. These elements, in turn, are arrays of three elements (text, selection and response).

You are using an array of questions in the jquery selector for each statement.

Below is the best way to do what you want:

 $.each(questions, function (i, value) { var text = questions[i][0]; var choice = questions[i][1]; var answer = questions[i][2]; var output='<li>'+text+'</li>'; // rest of your code using text, choices and answers });