如何在JavaScript數組中隨機獲取JSON對象

Question

我目前正在使用Jquery在JS進行簡單的圖片測驗。

我將問題和答案存儲在JSON文件中。

整個系統運行良好，但是我希望問題的順序是隨機的 ，而不是有序的 。

這是我第一次使用JSON，但似乎找不到如何執行此操作。

這是我的controller.js：

$(document).ready(function () {

var questionNumber=0;
var questionBank=new Array();
var stage="#game1";
var description="#description";
var stage2=new Object;
var questionLock=false;
var numberOfQuestions;
var score=0;

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

for(i=0;i<data.quizlist.length;i++){ 
questionBank[i]=new Array;
questionBank[i][0]=data.quizlist[i].question;
questionBank[i][1]=data.quizlist[i].option1;
questionBank[i][2]=data.quizlist[i].option2;
questionBank[i][3]=data.quizlist[i].option3;
questionBank[i][4]=data.quizlist[i].description;
}
numberOfQuestions=questionBank.length; 


displayQuestion();
})//gtjson
function displayQuestion(){
var rnd=Math.random()*3;
rnd=Math.ceil(rnd);
var q1;
var q2;
var q3;
var des;

if(rnd==1){q1=questionBank[questionNumber][1];q2=questionBank[questionNumber][2];q3=questionBank[questionNumber][3];}
if(rnd==2){q2=questionBank[questionNumber][1];q3=questionBank[questionNumber][2];q1=questionBank[questionNumber][3];}
if(rnd==3){q3=questionBank[questionNumber][1];q1=questionBank[questionNumber][2];q2=questionBank[questionNumber][3];}

des = questionBank[questionNumber][4];

$(stage).append('<div  class="questionText">'+questionBank[questionNumber][0]+'</div><div id="1" class="pix"><img src="img/'+q1+'"></div><div id="2" class="pix"><img src="img/'+q2+'"></div><div id="3" class="pix"><img src="img/'+q3+'"></div>');

$('.pix').click(function(){
if(questionLock==false){questionLock=true;  
//correct answer
if(this.id==rnd){
$(stage).append('<div class="feedback1">Bien joué ! :D</div>');
$(stage).append('<input type="button" value="=>" id="nxtQuestion" >');
$(description).append(des);
$('#nxtQuestion').click(function(){
   changeQuestion();

});
score++;
}
//wrong answer  
if(this.id!=rnd){
$(stage).append('<div class="feedback2">Mauvaise réponse ! :(</div>');
$(stage).append('<input type="button" value="=>" id="nxtQuestion" >');
$(description).append(des);
$('#nxtQuestion').click(function(){
   changeQuestion();

});  
}
//setTimeout(function(){changeQuestion()},1000);
}})
}//display question


fillDB();

function changeQuestion(){

    questionNumber++;
$(description).empty();
if(stage=="#game1"){stage2="#game1";stage="#game2";}
    else{stage2="#game2";stage="#game1";}

if(questionNumber<numberOfQuestions){displayQuestion();}else{displayFinalSlide();}

 $(stage2).animate({"right": "+=1000px"},"slow", function() {$(stage2).css('right','-1000px');$(stage2).empty();});
 $(stage).animate({"right": "+=1000px"},"slow", function() {questionLock=false;});
}//change question




function displayFinalSlide(){

    $(stage).append('<div class="questionText">Vous êtes arrivés au bout du quiz!<br><br>Total de questions: '+numberOfQuestions+'<br>Réponses correctes: '+score+'</div>');

}//display final slide







});//doc ready

這是JSON文件：

{"quizlist":[

{
"question":"Quelle image montre un Abelia?",
"option1":"abelia-grandiflora.jpg",
"option2":"acer-negundo-flamingo.jpg",
"option3":"acer-palmatum-atropurpureum.jpg",
"description":"<strong>Floraison:</strong> 7-8 mois<br><strong>Taille:</strong>1m<br><strong>Description:</strong>Arbuste vigoureux, à branches arquées. Profusion de fleurs blanc rosé, parfumées. Intéressant pour sa longue floraison."  
},
{
"question":"Quelle image montre un acer?",
"option1":"acer-negundo-flamingo.jpg",
"option2":"abelia-grandiflora.jpg",
"option3":"amelanchier-lamarckii.jpg",
"description":"<strong>Floraison:</strong> 7-8 mois<br><strong>Taille:</strong>1m<br><strong>Description:</strong>Arbuste vigoureux, à branches arquées. Profusion de fleurs blanc rosé, parfumées. Intéressant pour sa longue floraison."
},
{
"question":"Quelle image montre un Amelanchier?",
"option1":"amelanchier-lamarckii.jpg",
"option2":"acer-palmatum-atropurpureum.jpg",
"option3":"abelia-grandiflora.jpg",
"description":"<strong>Floraison:</strong> 7-8 mois<br><strong>Taille:</strong>1m<br><strong>Description:</strong>Arbuste vigoureux, à branches arquées. Profusion de fleurs blanc rosé, parfumées. Intéressant pour sa longue floraison."
}

]
}

如果有人能指出正確的方向，我將不勝感激。 非常感謝。

Answer 1

我建議更改JSON結構，而不是option1/2/3使用數組：

{
    "quizlist": [
        {
            "question": "Quelle image montre un Abelia?",
            "options": [
                "abelia-grandiflora.jpg",
                "acer-negundo-flamingo.jpg",
                "acer-palmatum-atropurpureum.jpg"
            ],
            "description": "<strong>Floraison:</strong> 7-8 mois<br><strong>Taille:</strong>1m<br><strong>Description:</strong>Arbuste vigoureux, à branches arquées. Profusion de fleurs blanc rosé, parfumées. Intéressant pour sa longue floraison."
        },
        {
            "question": "Quelle image montre un acer?",
            "options": [
                "acer-negundo-flamingo.jpg",
                "abelia-grandiflora.jpg",
                "amelanchier-lamarckii.jpg"
            ],
            "description": "<strong>Floraison:</strong> 7-8 mois<br><strong>Taille:</strong>1m<br><strong>Description:</strong>Arbuste vigoureux, à branches arquées. Profusion de fleurs blanc rosé, parfumées. Intéressant pour sa longue floraison."
        },
        {
            "question": "Quelle image montre un Amelanchier?",
            "options": [
                "amelanchier-lamarckii.jpg",
                "acer-palmatum-atropurpureum.jpg",
                "abelia-grandiflora.jpg"
            ],
            "description": "<strong>Floraison:</strong> 7-8 mois<br><strong>Taille:</strong>1m<br><strong>Description:</strong>Arbuste vigoureux, à branches arquées. Profusion de fleurs blanc rosé, parfumées. Intéressant pour sa longue floraison."
        }
    ]
}

直到現在，您才能使用所需的任何數組隨機播放代碼，例如： https : //stackoverflow.com/a/12646864/3356679

  /** * Randomize array element order in-place. * Using Durstenfeld shuffle algorithm. */ function shuffleArray(array) { for (var i = array.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var temp = array[i]; array[i] = array[j]; array[j] = temp; } } 

遺憾的是： JSON.parse仍然需要從數組中刪除最后一個逗號（有時感覺我們仍然在1990年）。