How to get data from json response received with ajax and put value on plotly.js chart?

Question

AJAX

When requesting from ajax at
127.0.0.1:8000/sensor/print
I get a response like this:
{"temp0": "10", "temp1": "30", "voltage": "10", "current": "100"}
I want to take the value of temp0 and plot those values ​​using plotly js.
How can I achieve this?
here is my code in JS:

$(document).ready(function(){
    function secret(){
    $.ajax({
              type: "GET",
              url: 'http://127.0.0.1:8000/sensor/print/',
              data: {get_param: 'temp0'},
              dataType: 'json',
              success: function (data) {
                return Number(data.temp0);
              }
            });

    }


    Plotly.newPlot('simple',[{
        y: [1,2,3].map(secret),
        mode: 'lines',
        line: {color: '#80CAF6'}
    }]);
        var interval = setInterval(function() {
                  Plotly.extendTraces('simple', {
                    y: 
                  }, [0])

                  if(++cnt === 100) clearInterval(interval);
                }, 300);
        });

And in the end, I don’t draw anything, what am I doing wrong?

Answer 1

The problem is the asynchrony of the incoming data. The function ends before the data has time to go to return, so nothing is returned. If you need to separate these two parts, put in a Plotly function and call it in ajax.