Javascript上で、Ajaxで取ってきたデータを使用したい

Question

やりたいこと

Python からAjaxを使用してJavascriptに値を渡します。そのAjax で取ってきた値をJavascript上で、処理（if文など）したいのですが、Json形式のままなので、そのままでは使うことができません。。

試しに、Jsonデータをそれぞれ変数に代入し、それをコンソールで表示させてみると。「undefined」を表示されてしまいます。

Javascript 上で Ajax を通して受け取ったデータはどうやったら使用できるのか教えていただきたいです。

 $(function (){


    function abc(){
     

      $.ajax({
        url : '/data',
        type : 'GET',
        dataType : 'json',
      })
      //通信成功時の処理
      .done(function(json){ 
        /*
        console.log(data(['production']['machine1']));
        console.log(data(['cycletime']['machine1']));
        console.log(data(['green']['machine1']));
        console.log(data(['yellow']['machine1']));
      */
      
        console.log(json) 
        
        
        var production = json[0];
        var cycletime = json[1];
        var green = json[2];
        var yellow = json[3];

        console.log(production);
        console.log(cycletime);
        console.log(green);
        console.log(yellow);

      if(green==1){
        ctx1.fillStyle = "rgb(0, 255, 0)";
      } 
      else if(yellow==1){
        ctx1.fillStyle = "rgb(255, 255, 0)";
      } 
      else{ 
        ctx1.fillStyle = "rgb(255, 0, 0)";
        console.log('赤');
      }
      
      })
     
      //通信失敗時の処理
      .fail(function(data) {
        console.log('データが取れていません');
      })

      
    }
    setInterval (abc, 1000);

  })

3/14追記

$.ajax({
        url : '/data',
        type : 'GET',
        dataType : 'json',
      })
      //通信成功時の処理
      .done(function(json){ 
        /*
        console.log(data(['production']['machine1']));
        console.log(data(['cycletime']['machine1']));
        console.log(data(['green']['machine1']));
        console.log(data(['yellow']['machine1']));
      */
      
        console.log(json);
        const obj = JSON.parse(JSON.stringify(json));

        console.log(obj.production);
        console.log(obj.cycletime);
        console.log(obj.green);
        console.log(obj.yellow);
        
        
        var production = obj.production;
        var cycletime = obj.cycletime;
        var green = obj.green;
        var yellow = obj.yellow;
        

        console.log(production);
        console.log(cycletime);
        console.log(green);
        console.log(yellow);
      
        

      if(green===0){
        ctx1.fillStyle = "rgb(0, 255, 0)";
        console.log("OK");
      } 
      else if(yellow===1){
        ctx1.fillStyle = "rgb(255, 255, 0)";
      }
      else{ 
        ctx1.fillStyle = "rgb(255, 0, 0)";
        console.log('赤');
      }
      
      })
     
      //通信失敗時の処理
      .fail(function(data) {
        console.log('データが取れていません');
      })

Answer 1

console.log(json) で表示されているオブジェクトに相応しい方法でアクセスしましょう。

        var production = json[0];
        var cycletime = json[1];
        var green = json[2];
        var yellow = json[3];

json は配列ではないですよね。下記コードのようにすればいいんじゃないでしょうか。

        var production = json.production;
        var cycletime = json.cycletime;
        var green = json.green;
        var yellow = json.yellow;

---

追記:
最新の情報に合わせたコード:

        var production = json.production.machine1;
        var cycletime = json.cycletime.machine1;
        var green = json.green.machine1;
        var yellow = json.yellow.machine1;

Comments

[Kiiko1]

ありがとうございます。
このように表記することで、Json形式でコンソールに表示させることができました。

しかし、その後のif文において、やはりデータを使用することができません。その点に関して何かご教授いただけると幸いです。

[makun625]

＝三つにしてもダメですか？

[int32_t]

JSONの中でgreenやyellowがどうなっているのか不明なので、助言できません。

[Kiiko1]

greenやyellowの中身は「0」か「1」の数字です。
green の値が「１」だったら、色を緑で表示、という具合に条件を設定しています。

[int32_t]

> greenやyellowの中身は「0」か「1」の数字です。

それが本当だったら今のコードが動くはずなので、疑わしいのです。JSONのソースや console.log(green); の結果をそのまま開示できますか?

[Kiiko1]

console.log(green); ではきちんと「１」という結果を表示できている状態です。
（投稿の1番下に画像を添付しています。）

また、いろいろとJavascriptを書き換えてみたのですが、現在は赤色で描画されてしまっています。（本来は greenの値が１なので、緑色で表示してほしい）
書き換えたコードも投稿に改めて添付しています。

[int32_t]

追記された画面から、
var green = obj.green.machine1;
var yellow = obj.yellow.machine1;
ですね。

[Kiiko1]

ありがとうございます。
きちんと色分けすることができました♪