如何在javascript数组中随机获取JSON对象

Question

我目前正在用JS和Jquery做一个简单的图片测试。

我将我的问题和答案存储在JSON文件中。

整个系统运行良好，但我希望问题的顺序是随机，而不是 order 。

这是我第一次使用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

/** *随机化数组元素的位置顺序。*使用杜斯滕菲尔德洗牌算法。*/函数shuffleArray(数组){ for (var i= array.length - 1；i> 0；i-){ var j= Math.floor(Math.random() * (i + 1))；var temp = arrayi；arrayi = arrayj；arrayj = temp；}}

悲伤注意： JSON.parse仍然需要从数组中删除最后一个逗号(有时感觉我们还在1990年)。