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

如何在javascript数组中随机获取JSON对象,javascript,arrays,json,random,Javascript,Arrays,Json,Random,我目前正在用Jquery用JS做一个简单的图片测试 我将问题和答案存储在JSON文件中 整个系统运行良好,但我希望问题的顺序是随机的,而不是有序的 这是我第一次使用JSON,我似乎找不到如何做到这一点 这是我的controller.js: $(document).ready(function () { var questionNumber=0; var questionBank=new Array(); var stage="#game1"; var description="#descrip

我目前正在用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."
}

]
}

如果有人能给我指出正确的方向,我将不胜感激。非常感谢。

我建议更改JSON结构,而不是选项1/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."
        }
    ]
}

悲伤的提示:JSON.parse仍然需要从数组中删除最后一个逗号,有时感觉我们还是在1990年。

您可以看看这个可能的Nice副本,谢谢!差不多一个月后,但嘿,我是那么慢哈哈。
 /**
 * 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;
    }
}