Javascript、Jquery Codepen

Question

私は.getjsonで夢中になります。私は.getjsonを使用してWikipedia APIからデータを取得しようとしていますが、正常に動作します。 Wikipedia APIが10個の選択肢を返し、それぞれの選択をループする前に、forループ内の配列の長さを調べようとしています。データはまだ '.getjson'から利用できません。

Hereは私の作品です。 forループでconsole.log(sp.length);とsp.lengthを見てください。彼らは同様のデータを与えるべきですが、そのうちの1つは定義されておらず、もう1つは正常に動作しています。ここで

私のJSコードです：

$(document).ready(function() { 


var api_wiki="https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&titles=Main+Page&srsearch=cat&srwhat=text&callback=?"; 
var sp; 

$.getJSON(api_wiki,function(data){ 
    sp=data.query.search; 
// console.log(sp.length); 
}); //End of getJSON 

for (var i=0;i<sp.length;i++){ 

} 


});//End of get ready 

はなぜconsole.logはどちらも同じ変数を参照するにもかかわらず、二つの異なる答えを与えるのでしょうか？ 1つは定義されておらず、もう1つは正常に動作しています。 問題が直面している問題のみを反映するように質問を編集しました。

Answer 1

まだ持っていないデータを使用するようにjavascriptを要求することはできません。データが到着するのを待つ必要があります。

$(document).ready(function() { 


var api_wiki="https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&titles=Main+Page&srsearch=cat&srwhat=text&callback=?"; 
var sp; 

$.getJSON(api_wiki,function(data){ 
    sp=data.query.search; 
    console.log(sp.length); 
    workWithTheData(sp); 
}); //End of getJSON 

function workWithTheData(sp){ 
    for (var i=0;i<sp.length;i++){ 
     console.log(sp[i]); 
    } 
} 


});//End of get ready