JSONからデータを取得し、JavaScriptでデータを取り込む

Question

私はJavascriptでトリビアクイズのWebゲームを作っています！私は正常にAPIからクイズの質問を取得しています。どういうわけか、私のウェブページのAPIレスポンスから質問を入力することはできません！私は以下のコードのように自己宣言された質問を追加することができます！

quiz.jsあなたのCAを修正する必要があります

function Quiz(questions) { 
this.score = 0; 
this.questions = questions; 
this.questionIndex = 0; 
} 

Quiz.prototype.getQuestionIndex = function() { 
return this.questions[this.questionIndex]; 
} 

Quiz.prototype.guess = function(answer) { 
if(this.getQuestionIndex().isCorrectAnswer(answer)) { 
    this.score++; 
} 

this.questionIndex++; 
} 

Quiz.prototype.isEnded = function() { 
return this.questionIndex === this.questions.length; 
} 

question.js

function Question(text, choices, answer) { 
this.text = text; 
this.choices = choices; 
this.answer = answer; 
} 

Question.prototype.isCorrectAnswer = function(choice) { 
return this.answer === choice; 
} 

app.js

function populate() { 
if(quiz.isEnded()) { 
    showScores(); 
} 
else { 
    // show question 
    var element = document.getElementById("question"); 
    element.innerHTML = quiz.getQuestionIndex().text; 

    // show options 
    var choices = quiz.getQuestionIndex().choices; 
    for(var i = 0; i < choices.length; i++) { 
     var element = document.getElementById("choice" + i); 
     element.innerHTML = choices[i]; 
     guess("btn" + i, choices[i]); 
    } 

    showProgress(); 
} 
}; 

function guess(id, guess) { 
var button = document.getElementById(id); 
button.onclick = function() { 
    quiz.guess(guess); 
    populate(); 
} 
}; 


function showProgress() { 
var currentQuestionNumber = quiz.questionIndex + 1; 
var element = document.getElementById("progress"); 
element.innerHTML = "Question " + currentQuestionNumber + " of " + 
quiz.questions.length; 
}; 

function showScores() { 
var gameOverHTML = "<h1>Result</h1>"; 
gameOverHTML += "<h2 id='score'> Your scores: " + quiz.score + "</h2>"; 
var element = document.getElementById("quiz"); 
element.innerHTML = gameOverHTML; 
}; 

var getJSON = function(url, callback) { 
var xhr = new XMLHttpRequest(); 
xhr.open('GET', url, true); 
xhr.responseType = 'json'; 
xhr.onload = function() { 
    var status = xhr.status; 
    if (status === 200) { 
    callback(null, xhr.response); 
    } else { 
    callback(status, xhr.response); 
    } 
}; 
xhr.send(); 
}; 

getJSON('https://opentdb.com/api.php? 
amount=10&category=20&difficulty=medium&type=multiple', 
function(err,data) { 

alert('Your query count: ' + data.results[0].category);}); 

// create questions 
var questions = [ 
new Question("Which one is not an object oriented programming language?", 
["Java", "C#","C++", "C"], "C"), 
new Question("Which language is used for styling web pages?", ["HTML", 
"JQuery", "CSS", "XML"], "CSS"), 
new Question("There are ____ main components of object oriented 
programming.", ["1", "6","2", "4"], "4"), 
new Question("Which language is used for web apps?", ["PHP", "Python", 
"Javascript", "All"], "All"), 
new Question("MVC is a ____.", ["Language", "Library", "Framework", "All"], 
"Framework")]; 


var quiz = new Quiz(questions); 
populate(); 

Answer 1

llback関数は、自己宣言の質問のときと同じように動作します。何かのように、

getJSON('https://opentdb.com/api.php? 
amount=10&category=20&difficulty=medium&type=multiple', 
function(err,data) { 
    var results = data.results; 
    var questions = []; 
    results.forEach(function(result) { 
     var answers = result.incorrect_answers.concat(result.correct_answer); 
     var temp = new Question(result.question, answers, result.correct_answer); 
     questions.push(temp); 
    }); 
    var quiz = new Quiz(questions); 
    populate(); 
});