配列が空でないときは... JavaScript

Question

私がしていることは、jsonファイルから値を取得し、それらを配列にプッシュしてランダムに選択してHTMLファイルに表示することです。私がいる問題は

var quotes = []; 
var authors = []; 

function loadJSON(callback) { 

    var xobj = new XMLHttpRequest(); 
    xobj.overrideMimeType("application/json"); 
    xobj.open('GET', 'quotes.json', true); 
    xobj.onreadystatechange = function() { 
     if (xobj.readyState == 4 && xobj.status == "200") { 
     // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode 
      callback(xobj.responseText); 
     } 
    }; 
    xobj.send(null); 
} 

function init() { 
    loadJSON(function(response) { 
     // Parse JSON string into object 
     var data = JSON.parse(response); 
     for(var i in data){ 
      var key = i; 
      var val = data[i]; 
      quotes.push(key); 
      authors.push(val); 
     } 
    }); 
} 

init(); 

var index = Math.floor(Math.random()* (quotes.length + 1)); 

document.getElementById("p1").innerHTML = "<span class=\"quotes\">&ldquo;</span>" + quotes[index] + "<span class=\"quotes\">&rdquo;</span>" + "<span id=\"author\">" + " – " + authors[index] + "</span"; 

は、だから私のinit関数では、配列のキーとvalを押して...何かが配列であっても、それが空であるかのように、それはそれを扱うということですが、これは空のように扱います...これは簡単な質問ですが残念ですが、私はJSONでかなり新しいです。ありがとう

Answer 1

initの作業が実際に完了する前に、あなたのコードの最後の2行（init関数の呼び出しに続く関数）を実行していると思います。

つまり、loadJSONと同じようにコールバックをinitに渡し、最後の2行を実行します。

Answer 2

Xufoxが指摘しているように、非同期コードを扱っています.getElementByIdがデータ要求を実行してもまだ完了していないため、innerHTMLの空の配列になります。あなたはバベル、for ofを使用している場合

これは、あなたの質問に関連しますが、much as you can when dealing with arraysとしてfor ... inを使用して、ボイドされていないが、そのために古い学校forを好みますか。