Der Versuch, eine Liste in JQuery aus einer JSON-Datei zu füllen. Wie zu debuggen?

Question

So habe ich eine JSON-Datei, die ich Quiz-Fragen erhalten muss. Momentan speichere ich die Fragen einfach in einem Array als Objekt. Jedes Frageobjekt hat "Text" (die Frage selbst), "Auswahl" (ein Array möglicher Antworten) und "Antwort" (ein Int, der der Position der richtigen Antwort entspricht).

Wie kann ich überprüfen, ob die Frageobjekte richtig gespeichert sind? Ich möchte eine Liste von Fragen erstellen und habe versucht, meine Liste mit Fragen [i] .text zu füllen und es hat nicht funktioniert. Ich habe Firebug installiert, um zu debuggen, was vor sich ging, aber ich bin mir nicht ganz sicher, wie ich es am besten nutzen kann.

Die JSON ist in diesem Format:

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

Meine JavaScript-Datei:

$(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') 


}); 
}) 

schließlich einige HTML:

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

Ich weiß, es ist eine lange Frage, aber ich schätze jede Hilfe. Das Endziel besteht darin, eine Liste mit Fragen zu erstellen, die beim Klicken die Antwortmöglichkeiten anzeigt und einen Toast ausgibt, um den Benutzer zu benachrichtigen, wenn die ausgewählte Option korrekt ist oder nicht. Ich möchte auch die Frage in der Liste in grün hervorheben, wenn sie richtig beantwortet wird, und ansonsten rot.

EDIT:

Arbeitscode:

$(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

Sie each falsch für ein verwenden. Nummer zwei müssen Sie erkennen, dass Sie ein Object of Objects zurück in Ihre JSON-Antwort bekommen. Sie müssen über jedes Objekt iterieren, das Ihre Frage-/Antwortdaten enthält, und weiter über dieses Frage/Antwort-Objekt iterieren. Außerdem haben Sie ein Array in diesem verschachtelten Objekt verschachtelt und müssen es durchlaufen, um Ihre Fragen zu bekommen.Werfen Sie einen Blick auf einige 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

versuchen, dies ..

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

Sind Sie tatsächlich über die Reihe von Entscheidungen laufen, wenn Sie es bekommen? here's a fiddle

entweder Sie benötigen einen $.each in jQuery gefunden zu verwenden, oder wenn Sie reine Javascript

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

Answer 4

wollen Soweit ich verstehen kann: Die questions ist ein Array von wenigen Elementen. Diese Elemente sind wiederum Arrays aus drei Elementen (Text, Auswahl und Antwort).

Sie verwenden das Frage-Array im jquery-Selektor für die each-Anweisung.

Es folgt eine bessere Art und Weise zu tun, was Sie wollen:

$.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 
});