Javascriptのファイルが２つある場合のPythonとのデータ受け渡しについて

やりたいこと

Ajax を用いて、Pythonからデータを受け取り、それをもとに色分けをする関数を作っています。
pythonでgreen、yellow のそれぞれの IPアドレスを送信したら、「０」か「１」で返ってきます。
green が「１」なら緑で、yellow が「１」なら黄色で、greenもyellow も「０」なら赤色でcanvasで図形を描画したいです。

詳細

Javascript (Ajax) のファイルが２つあります。
片方はHTML に Javascriptで「/data」というURLで記述し、もう片方は「/data2」というURLでJavascriptのファイルに記述っていう風にして、1つのPythonのファイルからデータを受け渡してもらうという状況です。

わからないこと

Javascript ファイルに記述している下記↓の部分が表示されません。
そもそもファイルが２つあることが問題なのか、Javascriptに記述しているデータの受け渡しの書き方が違うのかがわかりません。
該当箇所で、コンソールにエラーは出ていません。
また、コマンドプロンプトで確認したところ、機械からデータは受け取れています。

Javascript
1$.ajax({
2        url : '/data2',
3        type : 'GET',
4        dataType : 'json',
5      })
6      //通信成功時の処理
7      .done(function(data){ 
8
9        console.log(data) 
10
11      if (data(['green']['machine1'])==1)  {ctx1.fillStyle = "rgb(0, 255, 0)";
12       } else if (data(['yellow']['machine1'])==1) { ctx1.fillStyle = "rgb(255, 255, 0)";
13       } else  { ctx1.fillStyle = "rgb(255, 0, 0)"; }
14      
15      })
16      //通信失敗時の処理
17      .fail(function(data) {
18        console.log('データが取れていません');
19      })
20
21      //通信成功・失敗を問わず
22      .always(function(data){
23
24        console.log('通信中');
25
26      });
27    }
28    setInterval (abc, 1000);

コード全貌

Javascript
1var canvas1 = document.getElementById("myCanvas1");
2var ctx1 = canvas1.getContext("2d");
3let client_w = document.getElementById("myCanvas1").clientWidth;
4var e = new Date();
5var now = new Date();
6var time = parseInt(e.getHours()*3600) + parseInt(e.getMinutes()*60) + parseInt(e.getSeconds()); //3600
7var startpoint = (time/86400)*client_w*0.3;
8var cw = 0.0058
9
10
11
12console.log(time, startpoint, client_w);
13
14
15
16  
17
18  $(function (){
19
20
21    function abc(){
22      
23      console.log('あいうえお');
24
25      var now = new Date();
26      time = parseInt(e.getHours()*3600) + parseInt(e.getMinutes()*60) + parseInt(e.getSeconds());
27
28      if (time >= 86399){
29      startpoint = 0;
30      ctx1.clearRect(0, 30, client_w, 60)
31      }
32
33      console.log(time, client_w);
34      ctx1.fillRect(startpoint, 30, 0.0058, 60);
35      startpoint = startpoint + cw;
36
37      console.log(startpoint);
38
39      $.ajax({
40        url : '/data2',
41        type : 'GET',
42        dataType : 'json',
43      })
44      //通信成功時の処理
45      .done(function(data){ 
46
47        console.log(data) 
48
49      if (data(['green']['machine1'])==1)  {ctx1.fillStyle = "rgb(0, 255, 0)";
50       } else if (data(['yellow']['machine1'])==1) { ctx1.fillStyle = "rgb(255, 255, 0)";
51       } else  { ctx1.fillStyle = "rgb(255, 0, 0)"; }
52      
53      })
54      //通信失敗時の処理
55      .fail(function(data) {
56        console.log('データが取れていません');
57      })
58
59      //通信成功・失敗を問わず
60      .always(function(data){
61
62        console.log('通信中');
63
64      });
65    }
66    setInterval (abc, 1000);
67
68    
69
70  })
71

HTML
1<script>
2    $(function() {
3        function get_data(){
4            $.ajax({
5                url : '/data',
6                type : 'GET',
7                dataType : 'json',
8            })
9            //通信成功時の処理
10            .done(function(data){
11                $('#result1').text(data['production']['machine1']);
12                $('#result2').text(data['cycletime']['machine1']);
13                $('#result3').text(data['production']['machine3']);
14                $('#result4').text(data['production']['machine4']);
15                $('#result5').text(data['production']['machine5']);
16                $('#result6').text(data['production']['machine6']);
17                $('#result7').text(data['production']['machine7']);
18                $('#result8').text(data['production']['machine8']);
19                $('#result9').text(data['production']['machine9']);
20                $('#result10').text(data['production']['machine10']);
21                $('#result11').text(data['production']['machine11']);
22                $('#result12').text(data['production']['machine12']);
23                $('#result13').text(data['production']['machine13']);
24                $('#result14').text(data['production']['machine14']);
25                $('#result15').text(data['production']['machine15']);
26                $('#result16').text(data['production']['machine16']);
27                $('#result17').text(data['production']['machine17']);
28                $('#result18').text(data['production']['machine18']);
29                $('#result19').text(data['production']['machine19']);
30                $('#result20').text(data['production']['machine20']);
31                $('#result21').text(data['production']['machine21']);
32                $('#result22').text(data['production']['machine22']);
33                $('#result23').text(data['production']['machine23']);
34                $('#result24').text(data['production']['machine24']);
35            })
36            //通信失敗時の処理
37    
38            console.log("更新しています")
39        }
40        get_data();
41        setInterval(get_data, 10000);
42    });
43    
44    </script>

Python
1import socket
2from flask import Flask, render_template
3from flask_socketio import SocketIO,send, emit
4from decimal import Decimal
5import logging
6import socket
7import webbrowser
8import math
9import time
10import datetime
11import threading
12from openpyxl import *
13import pandas
14import json
15import threading
16
17machines_ip_address = ['ここにIPアドレス']
18
19production_command = ['ここにIPアドレス']
20
21cycletime_command = ['ここにIPアドレス']
22
23green_command = ['ここにIPアドレス']
24
25yellow_command = ['ここにIPアドレス']
26
27
28def python_to_html(i,j,k,l,m):
29
30    time.sleep(3)
31    client5 = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
32
33    try:
34        client5.connect((i,8501))
35    except:
36        print("PLC接続NG")
37        return 0, 0
38
39
40    Production5 = j
41    Cycle_Time5= k
42    Green5 = l
43    Yellow5 = m
44
45    client5.send(Production5.encode("ascii"))
46    response5 = client5.recv(64)
47    response5 = response5.decode("UTF-8")
48    response5 = int(response5)
49
50    client5.send(Cycle_Time5.encode("ascii"))
51    response51 = client5.recv(64)
52    response51 = response51.decode("UTF-8")
53    response51 = int(response51)
54    response51 = response51 * Decimal('0.1')   
55    
56    client5.send(Green5.encode("ascii"))
57    response52 = client5.recv(64) 
58    response52 = response52.decode("UTF-8")
59    response52 = int(response52)
60
61    client5.send(Yellow5.encode("ascii"))
62    response53 = client5.recv(64) 
63    response53 = response53.decode("UTF-8")
64    response53 = int(response53)
65
66
67
68    print("send : " + Production5)
69    print("send : " + Cycle_Time5)
70    print("send : " + Green5)
71    print("send : " + Yellow5)
72
73    print("Received :" ,response5)
74    print("Received :" ,response51)
75    print("Received :" ,response52)
76    print("Received :" ,response53)
77
78    client5.close()
79
80    return response5, response51, response52, response53
81
82
83
84app = Flask(__name__)
85@app.route('/', methods=['GET'])
86def index():
87    return render_template('test2.html')
88
89@app.route('/data', methods=['GET'])
90def send_data():
91    one = python_to_html(" IPアドレス ")
92    
93
94    json_data = {'production':{'machine1':one[0]}, 'cycletime':{'machine1':one[1]}}
95    return json_data

行動規範の内容に同意します

回答1件

ベストアンサー

setInterval (abc, 1000); でabc()を呼ぶんじゃなくて、
url : '/data',の$.ajax().done()で呼ぶんじゃないの？
確実に1000ミリ秒以内にurl : '/data',の$.ajax()が応答があって処理が終わっているわけじゃなさそうなので、
/data の処理が成功して /data3 の処理が成功したら、というふうな流れであるべきではないかと思います。

それと、
.done(function(data){　～　}を抜けると、
受信したデータdataは揮発してしまうので、その点は問題ありませんか？
get_data()を10000ミリ秒後に再度実行するのは、なにか意味がありますか？
時間の流れで2つの処理の待ち合わせをすると、処理時間と応答があるまでの総合的な時間の差が生じるため、
受信データを一旦グローバル変数に上げて保存するなどして、
互いの処理の.done()にて両方のデータが揃っているかどうかをチェックして
後段の処理を呼ぶなどとすると良いかもしれません。