Próba zapełnienia listy w JQuery z pliku JSON. Jak debugować?

Question

Mam plik JSON, którego potrzebuję, aby uzyskać odpowiedzi na pytania z quizu. Na razie po prostu przechowuję pytania w tablicy jako obiekt. Każdy obiekt pytania ma "tekst" (samo pytanie), "wybory" (tablica możliwych odpowiedzi) i "odpowiedź" (int odpowiadający lokalizacji prawidłowego wyboru odpowiedzi).

Jak mogę sprawdzić, czy prawidłowo przechowuję obiekty pytania? Chcę utworzyć listę pytań i próbowałem zapełnić moją listę pytaniami [i] .text i nie zadziałało. Zainstalowałem Firebuga do debugowania tego, co się dzieje, ale nie jestem do końca pewien, jak najlepiej z niego korzystać.

JSON jest w następującym formacie: plik

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

My JavaScript:

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


}); 
}) 

Wreszcie, niektóre HTML:

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

Wiem, że to długie pytanie, ale naprawdę doceniam każdą pomoc. Ostatecznym celem jest posiadanie listy pytań, które po kliknięciu wyświetlają opcje odpowiedzi i zapewniają toast, aby powiadomić użytkownika, czy wybrana opcja jest poprawna, czy nie. Chcę również zaznaczyć pytanie na liście w zielonej, jeśli odpowiedź jest prawidłowa, a czerwona w przeciwnym razie.

EDIT:

kod robocza:

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

używasz each źle dla nich. Po drugie, musisz zdać sobie sprawę, że odzyskujesz obiekt Objects w odpowiedzi na JSON. Konieczne jest powtórzenie każdego obiektu zawierającego dane pytania/odpowiedzi i dalsze iterowanie nad tym obiektem pytania/odpowiedzi. Dalej masz tablicę zagnieżdżoną w tym zagnieżdżonym obiekcie i musisz ją przejrzeć, aby uzyskać twoje pytania.Spójrz na pseudo kod:

//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

spróbować ..

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

Czy rzeczywiście Iterowanie nad tablicy wyborów, kiedy się do niego dostać? here's a fiddle

albo trzeba użyć $.each znaleźć w jQuery lub jeśli chcesz czystym JavaScript

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

Answer 4

O ile mogę zrozumieć: questions jest tablicą z kilku elementów. Te elementy to z kolei tablice trzech elementów (tekst, wybory i odpowiedź).

Używasz tablicy pytań w selektorze jquery dla instrukcji each.

Po to lepszy sposób to zrobić, co chcesz:

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