gitリポジトリからjson形式のデータを抽出しようとします。

Question

私は初心者で、ajaxを学び、jsonファイルで作業しようとしています。私はJSONのフォーマットされたデータを使用したいと思います。しかし、私の要求の結果は空のテキストです。 更新：ここでは、コードの私の作品です：

var quoteContainer=document.getElementById("random-quote"); 
var btn=document.getElementById("btn"); 
btn.addEventListener("click",function(){ 
    var myRequest=new XMLHttpRequest(); 

    myRequest.open("GET","https://raw.githubusercontent.com/4skinSkywalker/Database-Quotes-JSON/master/quotes.json",true); 
    myRequest.addEventListener('load', function() { 
     var myData=JSON.parse(myRequest.responseText); 
     console.log(myRequest.responseText); 
     renderHTML(myData); 
    }); 
    myRequest.send(); 
}); 


function renderHTML(data){ 
    var LenJson=data.length; 
    var Num=Math.random()*LenJson; 
    console.log(Num); 
    var QuoteString="<p id='quote-text'>"+data[i].quoteText+"</p>" 
    var AuthorString="<p id='quote-author'>"+data[i].quoteAuthor+"</p>" 
    quoteContainer.insertAdjacentHTML('beforeend',QuoteString); 
    quoteContainer.insertAdjacentHTML('beforeend',AuthorString); 
} 

それはまだすべてのデータを返しません。どうして？

Answer 1

：

var quoteContainer = document.getElementById("random-quote"); 
 
var btn = document.getElementById("btn"); 
 

 
btn.addEventListener("click", function() { 
 
    var myRequest = new XMLHttpRequest(); 
 

 
    myRequest.open("GET", "https://raw.githubusercontent.com/4skinSkywalker/Database-Quotes-JSON/master/quotes.json", true); 
 
    
 
    myRequest.addEventListener('load', function() { 
 
    var myData = JSON.parse(myRequest.responseText); 
 

 
    renderHTML(myData); 
 
    }); 
 
    
 
    myRequest.send(); 
 
}); 
 

 
function renderHTML(data) { 
 
    var LenJson = data.length; 
 
    var Num = Math.floor(Math.random() * LenJson); 
 
    
 
    var QuoteString = "<p id='quote-text'>" + data[Num].quoteText + "</p>"; 
 
    var AuthorString = "<p id='quote-author'>" + data[Num].quoteAuthor + "</p>"; 
 
    
 
    quoteContainer.insertAdjacentHTML('beforeend', QuoteString); 
 
    quoteContainer.insertAdjacentHTML('beforeend', AuthorString); 
 
}

<button id="btn" type="button">Generate Random Quote</button> 
 
<div id="random-quote"></div>

Answer 2

メソッドを実行した後は、myRequest.send()を含めるのを忘れてしまいました。

詳細情報：あなたはそれをsend()とloadにそれを待つ必要があるhttps://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest