0

私は次のJSONを持っています：

var questions = {
    section: {
        "1": question: {
            "1": {
                "id" : "1a",
                "title": "This is question1a"
            },
            "2": {
                "id" : "1b",
                "title": "This is question2a"
            }
        },
        "2": question: {
            "1": {
                "id" : "2a",
                "title": "This is question1a"
            },
            "2": {
                "id" : "2b",
                "title": "This is question2a"
            }
        }
    }
};

注：元のJSONの形式が正しくないため、JSONは以下の回答に基づいて変更され、質問をより適切にサポートし、以下のforループでどのように機能するかを示しています。

完全なJSONには8つのセクションがあり、各セクションには15の質問が含まれます。

アイデアは、JSコードがどのセクションを引き出すかを読み取り、リストから質問を1つずつ引き出すというものです。最初のロード時に最初の質問が引き出され、ユーザーがオプションAまたはBのいずれかのボタンをクリックすると、すべての質問が引き出されるまで次の質問がロードされ、コールバックが実行されます。

追加されたリスト項目のボタンをクリックすると、ユーザーがスパンタグとして提供した回答とともに、応答と呼ばれる以下のリストに追加されます。

これは私がこれまでに持っているものです：

    function loadQuestion( $section ) {

    $.getJSON('questions.json', function (data) {

    for (var i = 0; i < data.length; i++) {

        var item = data[i];

        if (item === $section) {
            $('#questions').append('<li id="' + item.section.questions.question.id + '">' + item.section.questions.question.title + ' <button class="btn" data-response="a">A</button><button class="btn" data-response="b">B</button></li>');
        }
    }
});

}

    function addResponse( $id, $title, $response ) {

        $('#responses').append('<li id="'+$id+'">'+$title+' <span>'+$response+'</span></li>');

    }

    $(document).ready(function() {

        // should load the first question from the passed section
        loadQuestion( $('.section').data('section') );

        // add the response to the list and then load in the next question
        $('button.btn').live('click', function() {

            $id = $(this).parents('li').attr('id');
            $title = $(this).parents('li').html();
            $response = $(this).data('response');

            addResponse( $id, $title, $response );

            loadQuestion ( $('.section').data('section') );

        });

    });

およびページのHTML（各ページは個別のHTMLページです）：

<div class="section" data-section="1">

            <ul id="questions"></ul>

            <ul id="responses"></ul>

        </div>

セクションから最初の質問のみを取得し、すべてが呼び出されるまでそのセクションの各質問を連続してロードし、コールバックを実行してセクションが完了したことを示す方法に行き詰まり、混乱しました。

ありがとう

4

2 に答える 2

2
  1. 「セクション」と呼ばれるHTMLに複数のIDを含めないでください。
  2. 「セクション」と呼ばれる同じレベルのJSONに複数のキーを含めないでください。同じレベルのJSONのキーは、Key-Valueハッシュシステムについて考えているかのように一意である必要があります。そうすれば、実際に鍵を見つけることができます。同じレベルで重複するJSONキーは無効です。

1つの解決策は、セクションだけでなく、セクション1、セクション2などにすることもできます。HTMLのdata-section属性に依存しないでください。重複するhtmlIDおよび重複するJSONキーとして「section」がある場合はまだ良くありません。

HTML DOMにセクションIDが1つしかない場合、JSONには「セクション」と呼ばれるものも1つだけ含める必要があります。例：

var whatever = {
                    "section" : { 
                               "1":  {
                                        "question" : {
                                                       "1" : {
                                                          "id" : "1a",
                                                          "title" : "question1a"
                                                              },
                                                       "2" : {
                                                          "id" : "2a",
                                                          "title"  : "question2a"
                                                              }
                                                     }
                                      },                                 
                                "2":  {
                                        "question" : {
                                                       "1" : {
                                                          "id" : "1a",
                                                          "title" : "aquestion1a"
                                                              },
                                                       "2" : {
                                                          "id" : "2a",
                                                          "title"  : "aquestion2a"
                                                              }
                                                     }
                                      }
                                 }
               }
console.log(whatever.section[1].question[1].title); //"question1a"

質問をするには、次のようにします。

   function loadQuestions(mySectionNum) {

       $.getJSON('whatever.json', function(data){

        var layeriwant = data.section[mySectionNum].question;

           $.each(layeriwant, function(question, qMeta) {
               var desired = '<div id="question-' + 
                              qMeta.id +
                              '"' + 
                              '>' + 
                              '</div>';
               $("#section").append(desired);
               var quest = $("#question-" + qMeta.id);
               quest.append('<div class="title">' + qMeta.title + '</div>');
               //and so on for question content, answer choices, etc.
           });



       });
   }

次に、実際に質問を取得するには、次のようなものを使用します。

    function newQuestion(){
       var myHTMLSecNum = $("#section").attr('data-section');
       loadQuestions(myHTMLSecNum);
    }

    newQuestion();

  //below is an example, to remove and then append new question:

    $('#whatevernextbutton').on('click',function(){
       var tmp = parseInt($("#section").attr('data-section'));
       tmp++;
       $("#section").attr('data-section', tmp);
       $("#section").find('*').remove();
       newQuestion();
    });
于 2012-09-12T10:03:16.377 に答える
1

技術的には、getJSON関数は常に同じデータを取得します。あなたのコードは、与えられた id を抽出している id と決して比較しません。

getJSON は次のようになります。

function loadQuestion( $section ) {
        for (var i = 0; i < questions.section.length; i++) {

            var item = questions.section[i];
            if (item.id === $section) {
                for (var j = 0; j < item.questions.length; j++) {
                    $('#questions').append('<li id="' + 
                        item.questions[i].id + '">' + 
                        item.questions[i].title + 
                        ' <button class="btn" data-response="a">A</button><button class="btn" data-response="b">B</button></li>'
                    );
                }
           }
        }
}

JSON を次のように変更します。

var questions = {
    section: [{
        id: 1,
        questions: [{
            id: "1a",
            title: "This is question1a"
            },{
            id: "2a",
            title: "This is question2a"
        }]},{
        id: 2,
        questions: [{
            id: "1a",
            title: "This is question1a"
            },{
            id: "2a"
            title: "This is question2a"
        }]
    }]
};

編集: getJSONの最初のパラメーターは、JSON を返すサービスの URL です。

JSON がクライアントで既に定義されている場合は、getJSON はまったく必要ありません。上記のコードを修正しました。

于 2012-09-12T10:08:15.077 に答える