Ajaxで受け取った配列を扱いたい。

Question

前提・実現したいこと

Ajaxで受け取った配列を扱いたい。
Ajaxで受け取った値は$.ajax({　});の中でしか扱えないのでしょうか？

発生している問題・エラーメッセージ

app.js:14 Uncaught ReferenceError: data is not defined　at app.js:14

app.js:9 
(2) [Array(1), Array(7)]
0: [Array(7)]
1: (7) [Array(10), Array(10), Array(10), Array(10), Array(10), Array(10), Array(10)]
length: 2
__proto__: Array(0)

該当のソースコード

$.ajax({
  type: "POST",
  url: "./../php/json_encode.php",
  dataType : "json"
}).done(function(data){
    console.log(data);//エラーが起きない
}).fail(function(XMLHttpRequest, textStatus, error){
  alert(error);
});

//エラーが起きる
console.log(data);

Comments

[退会済みユーザー]

json_encode.php から応答として帰ってくる JSON 文字列（ですよね？）を質問欄を編集して追記してください。

Answer 1

https://api.jquery.com/jquery.ajax/

$.ajax({
  type: "POST",
  url: "./../php/json_encode.php",
  dataType : "json"
  , async: false //追加
}).done(function(data){
    console.log(data);//エラーが起きない
}).fail(function(XMLHttpRequest, textStatus, error){
  alert(error);
});

//エラーが起きる
console.log(data);

動作に違和感を感じたらasyncの意味とasync:falseが何をしているか調べましょう

Answer 2

グローバル変数かajax処理の外にローカル変数を作って、その中にdataを入れてあげればよいと思います

Comments

[UpaZiro]

get_data = [];

$.ajax({
type: "POST",
url: "./../php/json_encode.php",
dataType : "json"
}).done(function(data){
get_data = data;//エラーが起きない
console.log(get_data);
}).fail(function(XMLHttpRequest, textStatus, error){
alert(error);
});

//エラーが起きる
console.log(get_data);

[UpaZiro]

このように書き直してみましたがダメでした…(-_-;)

[ransuS_T]

エラー内容を記載していただけませんか？

[UpaZiro]

エラーは見当たりません…。
コンソールには次のように表示されています

app.js:17
Array(0)
length: 0
__proto__: Array(0)
app.js:11
Array(2)
0: [Array(7)]
1: (7) [Array(10), Array(10), Array(10), Array(10), Array(10), Array(10), Array(10)]
length: 2
__proto__: Array(0)

[ransuS_T]

ディープコピーで入れてもダメでしょうか？

[m.ts10806]

非同期だからでは。
「実行後に」を担保したいならwaitしないと。

[ransuS_T]

m.ts10806さん

そうでしたajaxは非同期通信なので
通信処理が完了する前にconsole.logが走っているのが原因ですね。