AJAXリクエストから配列値を取得する

Question

JSONファイルを読み込んで、各要素のnameプロパティを配列に設定するスクリプトがあります。

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
<script> 
var a = []; 

var myMethod = function(){ 
    $.ajax({ 
     url : "numbers.json", 
     dataType : "json", 
     success : function(data){ 
      for(i in data){ 
       a.push(data[i].name); 
      } 
     } 
    }); 
} 

myMethod(); 
console.log(a[2]); // console.log() returns "undefined" 
</script> 

JSON

[ 
    {"name" : "One"}, 
    {"name" : "Two"}, 
    {"name" : "Three"}, 
    {"name" : "Four"}, 
    {"name" : "Five"} 
] 

私は、この配列の特定のインデックスにアクセスcant't。コンソールログは、常に未定義を返します。私は私のAJAX呼び出しの後に.then()を追加しようとしましたが、それもうまくいきません。

Answer 1

あなたはこのような何かをしたいでしょう：

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
<script> 
var a = []; 

var myMethod = function() { 
    $.ajax({ 
     url: "numbers.json", 
     dataType: "json", 
     success: function(data) { 
      for (i in data) { 
       a.push(data[i].name); 
      } 
      handleData(); 
     } 
    }); 
} 

function handleData() { 
    console.log(a[2]); 
} 

myMethod(); 
</script> 

非同期は、あなたがデータを処理するために別々の機能が必要になります呼び出すためのようJavascriptが、行ずつ実行するために、あなたのすべてのコードを待ちません

または、成功コールバック内のデータを処理する。あなたがデータを使って何をしたいかによって、別の機能がより洗練されたものになります。

Answer 2

あなたが応答が他のサーバ側から受信したときにクエリが保留されているので、console.logが動作しません成功コールバック内console.logを呼び出して応答を待つ必要がありますので、$.ajax機能を使用して非同期要求を実行しているYour're：

success : function(data){ 
    for(i in data){ 
     a.push(data[i].name); 
    } 
    console.log(a[2]); 
} 

これが役に立ちます。

Answer 3

console.log(a[2]);がAJAX仕上げ処理の前に実行されるため、AJAXの非同期性のため、undefinedを返します。 console.logをAJAXの中に入れてください。作業スニペットを参照してください：あなたはAJAXがhereをどのように機能するかについての詳細を読むことができます

var a = []; 
 

 
var myMethod = function(){ 
 
    $.ajax({ 
 
     url : "https://api.myjson.com/bins/b4bnr", 
 
     dataType : "json", 
 
     success : function(data){ 
 
      for(i in data){ 
 
       a.push(data[i].name); 
 
      } 
 
      console.log(a[2]); 
 
     } 
 
    }); 
 
} 
 

 
myMethod();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

。

Answer 4

myMethod関数は、ajax呼び出しが完了すると完了し、console.logの次の行に移動します。成功はnumbers.jsonへのリクエストの後にのみ実行されます。これを試してください：

var a = []; 

var myMethod = function(){ 
    $.ajax({ 
     url : "numbers.json", 
     dataType : "json", 
     success : function(data){ 
      for(i in data){ 
       a.push(data[i].name); 
      } 
      console.log(a[2]); 
     } 
    }); 
} 

myMethod();