Ajaxで受け取ったデータを、Handsontableで表示させたい。

Question

mySQLのテーブルのデータを、PHP（test.php）を間に挟んで、
Ajaxで受け取ろうとしています。
受け取ったデータがコンソールに表示されているので、
データーは受け取れているようなのですが、
うまく、変数dataに入っていないのか、
Handsontableに表示されません。

いろいろ調べてみましたが、わかりませんでした。
お願いします、教えてください。

<script>
$(document).ready(function () {
    
  var data;
  
      $.ajax({
        // 通信先ファイル名
        url: "test.php",
        // 通信が成功した時
        success: function(data) {
            // 取得したレコードをeachで順次取り出す
            $.each(data, function(key, value){
                // #all_show_result内にappendで追記していく
                $('#all_show_result').append("<tr><td>" + value.id + "</td><td>" + value.name + "</td><td>" + value.price + "</td></tr>");
            });

            console.log("通信成功");
            console.log(data);
        },

        // 通信が失敗した時
        error: function(){
            console.log("通信失敗");
            console.log(data);
        }
    });
  
    container = document.getElementById('example'),  //後ほど表を展開する要素を指定
    hot;
        //以下はデータ指定と表示オプション
  hot = new Handsontable(container, {
    data: data,            //さっき作ったdataを指定
    minSpareRows: 1,       //表の一番下にいくつ空行を表示するか
    colHeaders: true,      //カラムの名前を表示するかどうか
    contextMenu: true      //セルを右クリックしたときのメニューをすべて表示
  });
  
  
  function bindDumpButton() {    //以下は基本的にいじりません
  
      Handsontable.Dom.addEvent(document.body, 'click', function (e) {
  
        var element = e.target || e.srcElement;
  
        if (element.nodeName == "BUTTON" && element.name == 'dump') {
          var name = element.getAttribute('data-dump');
          var instance = element.getAttribute('data-instance');
          var hot = window[instance];
          console.log('data of ' + name, hot.getData());
        }
      });
    }
  bindDumpButton();    //関数実行
 
});
</script>

Comments

[miyabi_pudding]

> 受け取ったデータがコンソールに漏れます。

どういうことですか？
コンソールに表示されるのが嫌ということですか？？

[jiritspenguin]

はい。すいません、よくわかっておらず、質問が明後日の方向に
いっているようでした、もうしわけありません。
コンソールに表示できているので、データは受取れている
ようなのですが、Handsontableに表示されないのです。
変数dataに、データが入っていないから表示されないのだと
思い、質問を立てました。

[miyabi_pudding]

ああ、よく状況わかりました。
回答しますね。
あと、第三者にもパッとわかるよう、インデントは揃えといたほうがいいかと。

[jiritspenguin]

回答、ありがとうございます。
インデントについても、努力します。ほんとうに、すいません。
こういう専門的人の使うサイトで質問させていただくレベルに達して
いないことは、重々承知しております。ほんとうに、すいません。

Answer 1

とりあえず$.ajaxのsuccessは古い書き方なのでdone構文に変更してください
感じからすると$.ajaxをfetchに切り替えて、async/awaitで処理すると
良いように思います

Comments

[yambejp]

どうしても$.ajaxで処理したいなら$.Deferredとか利用してください

Answer 2

原因はただ一点です。
data変数に非同期でデータを取得しているためです。
つまり、data変数にデータが入る前に、それ以下のコードが実行されてしまっているからです。
Ajax処理の成功時に、dataを使った処理を行うようにしましょう。

下記でどうでしょうか？

$(document).ready(function () {
  
  // どうせ非同期取得なので、ここで宣言してもあまり意味ないので、削除
  // var data;

  // このスコープ全体で使えるよう変数宣言を頭にもってきた。
  container = document.getElementById('example'), //後ほど表を展開する要素を指定
    hot;

  $.ajax({
    // 通信先ファイル名
    url: "test.php",
    // 通信が成功した時
    success: function(data) {
      // 取得したレコードをeachで順次取り出す
      $.each(data, function(key, value){
        // #all_show_result内にappendで追記していく
        $('#all_show_result').append("<tr><td>" + value.id + "</td><td>" + value.name + "</td><td>" + value.price + "</td></tr>");
      });

      console.log("通信成功");
      console.log(data);
      
      // グローバル変数にしっかり代入
      //以下はデータ指定と表示オプション
      hot = new Handsontable(container, {
        data: data,            //さっき作ったdataを指定
        minSpareRows: 1,       //表の一番下にいくつ空行を表示するか
        colHeaders: true,      //カラムの名前を表示するかどうか
        contextMenu: true      //セルを右クリックしたときのメニューをすべて表示
      });

      // 関数実行を、ここにもってくる。（非同期通信が終わってるので、hotにdataが入った状態なので）
      bindDumpButton(); //関数実行
    },

    // 通信が失敗した時
    error: function(){
      console.log("通信失敗");
      console.log(data);
    }
  });


  function bindDumpButton() {    //以下は基本的にいじりません
    Handsontable.Dom.addEvent(document.body, 'click', function (e) {

      var element = e.target || e.srcElement;

      if (element.nodeName == "BUTTON" && element.name == 'dump') {
        var name = element.getAttribute('data-dump');
        var instance = element.getAttribute('data-instance');
        var hot = window[instance];
        console.log('data of ' + name, hot.getData());
      }
    });
  }
  

});

Ajaxを使うなら、非同期処理と同期処理についてはよくよく勉強しましょう。

Answer 3

そもそも、ソースが、
他から、コピペで拾ってきたものをつぎはぎしたものだったので、
意図した動作になるように組まれていませんでした。

お騒がせしました、ありがとうございました。