JSのundefinedではなく、値を表示したいです。

Question

前提・実現したいこと

JavaScriptで開発をしているのですが、
ある場所では値が反映されているのに対して、ある場所ではundefinedになってしまいます。
こちらをundefinedから値が反映されるようにしたいです。

変数名：thresです。

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

値が反映されずundefinedになってしまう。

該当のソースコード

 // Load the Visualization API and the controls package.
 google.charts.load('current', { 'packages': ['corechart', 'controls'] });
 google.setOnLoadCallback(drawDashboard);
 let chart;
 let thres;
 let scale = [];
  
 function drawDashboard() {
 let dataArray = [['breaks','count']];
 let df = $.Deferred();
   
 
 $('#search').click(function() {
     $.ajax({
     data: 'post',
     url: "http://localhost:3000/result/"　+ $('#zip').val(),
     dataType : 'json',
     }).done(function(data){
         console.log("success");
         //Jsonデータのbreaks,countをGoogleChartのデータ配列に格納
         let data_item = data.count.map((c, i) => {
           return [data.breaks[i].toString(), c]; 
         });
         dataArray.push(...data_item);
         console.log(dataArray);
         df.resolve();
         //Jsonデータを各項目に反映
         $('#view_code').val(data.view_code);
         $('#view_code_url').val(data.view_code_url);
         $('#name').val(data.name);
         if(data.gender == 0){
             $('#gender').val("不明");
         }else if(data.gender == 1){
            $('#gender').val("男");
         }else if(data.gender == 2){
            $('#gender').val("女");
         }
         $('#category').val(data.category);
         $('#num').val(data.num);
         $('#data_num').val(data.data_num);
         $('#data_type').val(data.data_type);
         $('#unit').val(data.unit);
         $('#illness').val(data.illness);
         thres = data.thres;
         scale = data.scale;
         console.log(thres);//こちらではきちんとthresの値が反映されています。------------
     }).fail(function(){
     console.log("error");
     });

     
 });


 df.promise().done(function(){
 let chartdata = google.visualization.arrayToDataTable(dataArray);
 console.log(thres);//こちらではthresの値がundefinedになる。------------
 // Create a dashboard.
 let dashboard = new google.visualization.Dashboard(
   document.getElementById('dashboard_div'));

 // Create a range slider, passing some options
 var donutRangeSlider = new google.visualization.ControlWrapper({
   'controlType': 'NumberRangeFilter',
   'containerId': 'filter_div',
   'options': {
     'filterColumnLabel': 'count'
   }
 });

 // Create a pie chart, passing some options
 let Histogram= new google.visualization.ChartWrapper({
   'chartType': 'Histogram',
   'containerId': 'chart_div',
   'options': {
     'width': 900,
     'height': 600,
     'pieSliceText': 'value',
     'legend': 'right',
     'histogram': {
       hideBucketItems: true,
       bucketSize: 10
     },
     'bar': { groupWidth: "100%" },
     'colors': ['gray']
   },

 });
 dashboard.bind(donutRangeSlider, Histogram);

 dashboard.draw(dataArray);
 console.log(filter_div.value);
 changeOptions = function () {
   Histogram.setOption('histogram.bucketSize', document.getElementById('example').value);
   dashboard.draw(dataArray);
 };
 
 });
 
 }

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

         df.resolve();
         ...
         thres = data.thres;
         scale = data.scale;
         console.log(thres);

df.resolve() を thres = data.thres より後に呼べば良いのではないでしょうか。

Comments

[toyamal]

ありがとうございます！
無事、値を反映することが出来ました！

Answer 2

処理的にはjQueryですかね？
$.ajaxのdone内でグローバル変数に返したタイミングより、undefinedを返すコンソールで
参照するタイミングのほうが前なのでは？

$.ajaxをまって処理するなら$.whenなどの時系列処理が必要です

Comments

[toyamal]

ありがとうございます！
無事解決することが出来ました！