如何實現這個JSON文件？

我有下面的代碼，我似乎無法得到數據顯示在板上。 json文件是本地添加的，而不是來自URL。如何實現這個JSON文件？

 <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script> 
     <script src="js/bootstrap.min.js" type="text/javascript"></script> 
     <script src="js/scripts.js" type="text/javascript"></script> 
    </head> 
    <body> 
     <div class="container"> 
      <h2>Jeopardy!</h2> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <div class="text-center col-md-2 col-md-offset-1"><h4><strong>Category</strong></h4></div> 
        <div class="text-center col-md-2"><h4><strong>Category</strong></h4></div> 
        <div class="text-center col-md-2"><h4><strong>Category</strong></h4></div> 
        <div class="text-center col-md-2"><h4><strong>Category</strong></h4></div> 
        <div class="text-center col-md-2"><h4><strong>Category</strong></h4></div> 
        <div class="clearfix"></div> 
       </div> 
       <div class="panel-body" id="main-board"> 
        <div class="category col-md-2 col-md-offset-1"> 
         <div class="well question" data-toggle="modal" data-target="#myModal">100</div> 
         <div class="well question" data-toggle="modal" data-target="#myModal">200</div> 
         <div class="well question" data-toggle="modal" data-target="#myModal">300</div> 
         <div class="well question" data-toggle="modal" data-target="#myModal">400</div> 
         <div class="well question" data-toggle="modal" data-target="#myModal">500</div> 
        </div> 
        <div class="category col-md-2"> 
         <div class="well question" data-toggle="modal" data-target="#myModal">100</div> 
         <div class="well question" data-toggle="modal" data-target="#myModal">200</div> 
         <div class="well question" data-toggle="modal" data-target="#myModal">300</div> 
         <div class="well question" data-toggle="modal" data-target="#myModal">400</div> 
         <div class="well question" data-toggle="modal" data-target="#myModal">500</div> 
        </div> 
        <div class="category col-md-2"> 
         <div class="well question" data-toggle="modal" data-target="#myModal">100</div> 
         <div class="well question" data-toggle="modal" data-target="#myModal">200</div> 
         <div class="well question" data-toggle="modal" data-target="#myModal">300</div> 
         <div class="well question" data-toggle="modal" data-target="#myModal">400</div> 
         <div class="well question" data-toggle="modal" data-target="#myModal">500</div> 
        </div> 
        <div class="category col-md-2"> 
         <div class="well question" data-toggle="modal" data-target="#myModal">100</div> 
         <div class="well question" data-toggle="modal" data-target="#myModal">200</div> 
         <div class="well question" data-toggle="modal" data-target="#myModal">300</div> 
         <div class="well question" data-toggle="modal" data-target="#myModal">400</div> 
         <div class="well question" data-toggle="modal" data-target="#myModal">500</div> 
        </div> 
        <div class="category col-md-2"> 
         <div class="well question" data-toggle="modal" data-target="#myModal">100</div> 
         <div class="well question" data-toggle="modal" data-target="#myModal">200</div> 
         <div class="well question" data-toggle="modal" data-target="#myModal">300</div> 
         <div class="well question" data-toggle="modal" data-target="#myModal">400</div> 
         <div class="well question" data-toggle="modal" data-target="#myModal">500</div> 
        </div> 
       </div> 
      </div> 
     </div> 

     <div class="modal fade" id="myModal" tabindex="-1" role="dialog"> 
      <div class="modal-dialog" role="document"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
         <br/> 
         <h4 class="modal-title"></h4> 
        </div> 
        <div class="modal-body"></div> 
      </div> 
     </div> 
    </body>

到目前爲止，我有這個，我不知道如何繼續。

$(function() { 
    $('.question').click(function(){ 
     $('.modal-title').text('Category'); 
     $('.modal-body').text('Question'); 
    }); 
});

在一個單獨的文件board.json：

var board = 
[ 
    { 
     "name":"category1", 
     "questions":[ 
      { 
       "value":100, 
       "question":"Question 1 in category 1 for 100 points", 
       "answers":[ 
        { 
         "text":"A", 
         "correct":true 
        }, 
        { 
         "text":"B", 
         "correct":false 
        }, 
        { 
         "text":"C", 
         "correct":false 
        }, 
        { 
         "text":"D", 
         "correct":false 
        } 
       ] 
      }, 
      { 
       "value":200, 
       "question":"Question 2 in category 1 for 200 points", 
       "answers":[ 
        { 
         "text":"A", 
         "correct":true 
        }, 
        { 
         "text":"B", 
         "correct":false 
        }, 
        { 
         "text":"C", 
         "correct":false 
        }, 
        { 
         "text":"D", 
         "correct":false 
        } 
       ] 
      }, 
......

我一直在使用阿賈克斯試過，我不能得到的數據顯示。有人能幫助我指引正確的方向嗎？

來源

2015-12-09 heyyo

首先，您在board.json中定義了一個變量'board'，您需要將它重命名爲board.js，因爲它是一個JavaScript JSON對象。
其次，您必須在您的HTML頭中包含board.js，以便腳本可以識別該文件。
第三，你必須刪除手動添加的類別和問題，並動態地構建基於他們所提供的board.js

下面是一個工作示例：

<html> 
<head> 
    <script src="js/jquery.min.js" type="text/javascript"></script> 
    <script src="js/bootstrap.min.js" type="text/javascript"></script> 
    <script src="js/script.js" type="text/javascript"></script> 
    <script src="js/board.js" type="text/javascript"></script> 

    <link rel="stylesheet" href="bootstrap.min.css"/> 
</head> 
<body> 
    <div class="container"> 
     <h2>Jeopardy!</h2> 
     <div class="panel panel-default"> 
      <div id="headingPanel" class="panel-heading"> 
       <!-- removed the manual categories to be added Dynamicly from the given JSON Object -->  
      </div> 
      <div class="panel-body" id="main-board"> 
       <!-- removed the manual questions to be added Dynamicly from the given JSON Object -->  
      </div> 
     </div> 
    </div> 

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <br/> 
        <h4 class="modal-title"></h4> 
       </div> 
       <div class="modal-body"></div> 
      </div> 
     </div> 
</body>

和腳本文件會是這樣的：

$(function() { 

//first build the heading category titles 
board.forEach(function (currentCat) { 
    $("#headingPanel").append('<div class="text-center col-md-2 col-md-offset-1"><h4><strong>' + currentCat.name + '</strong></h4></div>'); 
}); 

$("#headingPanel").append('<div class="clearfix"></div>'); 


//second we build the questions 
board.forEach(function (currentCat) { 
    //let's get all the questions for the current Category : 
    var allQuestions = $('<div class="category col-md-2 col-md-offset-1">'); //create the category panel for questions 
    currentCat.questions.forEach(function (currentQuest) { 
     var question = $(
       '<div class="well question" data-toggle="modal" data-target="#myModal" questionCategory="' + currentCat.name + '" questionData="' + currentQuest.question + '">' + currentQuest.value + '</div>'); 
     allQuestions.append(question); //append each single question to the questions panel 
    }); 

    $("#main-board").append(allQuestions); //append the category panel for questions to the main board 
}); 


//move this function to the end of the build, so the click trigger can be applied .. 
$('.question').click(function (event) { //pass the event param, in order to get the specific question data to be displayed 
    $('.modal-title').text(event.target.attributes.questionCategory.value); // set the clicked question Category to the model display 
    $('.modal-body').text(event.target.attributes.questionData.value); // set the clicked question data to the model display 
});

}）;

，這是一個board.js樣本：

var board = 
    [ 
    { 
    "name":"category1", 
      "questions":[ 
      { 
      "value":100, 
        "question":"Question 1 in category 1 for 100 points", 
        "answers":[ 
        { 
        "text":"A", 
          "correct":true 
        }, 
        { 
        "text":"B", 
          "correct":false 
        }, 
        { 
        "text":"C", 
          "correct":false 
        }, 
        { 
        "text":"D", 
          "correct":false 
        } 
        ] 
      }, 
      { 
      "value":200, 
        "question":"Question 2 in category 1 for 200 points", 
        "answers":[ 
        { 
        "text":"A", 
          "correct":true 
        }, 
        { 
        "text":"B", 
          "correct":false 
        }, 
        { 
        "text":"C", 
          "correct":false 
        }, 
        { 
        "text":"D", 
          "correct":false 
        } 
        ] 
      } 
      ] 
      }, 
      { 
      "name":"category2", 
        "questions":[ 
        { 
        "value":100, 
          "question":"Question 1 in category 2 for 100 points", 
          "answers":[ 
          { 
          "text":"A", 
            "correct":true 
          }, 
          { 
          "text":"B", 
            "correct":false 
          }, 
          { 
          "text":"C", 
            "correct":false 
          }, 
          { 
          "text":"D", 
            "correct":false 
          } 
          ] 
        }, 
        { 
        "value":200, 
          "question":"Question 2 in category 2 for 200 points", 
          "answers":[ 
          { 
          "text":"A", 
            "correct":true 
          }, 
          { 
          "text":"B", 
            "correct":false 
          }, 
          { 
          "text":"C", 
            "correct":false 
          }, 
          { 
          "text":"D", 
            "correct":false 
          } 
          ] 
        } 
        ] 
        } 
    ];

，這是工作示例的截圖：

希望這有助於:)

來源

2015-12-10 11:26:21 xelilof

太感謝你了！這比我最初的實現簡單得多。感謝您解釋我需要做什麼！絕對是從你身上學到的東西，而不僅僅是複製和粘貼:) – heyyo

如何實現這個JSON文件？

回答

相關問題