如何獲取JSON對象的返回值作為變量

Question

我正在嘗試使用從JSON對象中包含的函數獲得的數據創建動態圖表。

JSON對象是通過Relayr Javascript API返回的，類似於：

relayr.devices().getDeviceData({
            token: toke,
            deviceId: Candle1_deviceId,
            incomingData: function (data) {
                console.log(data.readings[0].meaning);
                console.log(data.readings[0].value);
                return data.readings[0].value;
            }
        });

我想做的是將data.readings [0] .value放入圖表中，如下所示：

window.onload = function () {

        var dps = []; // dataPoints

        var chart = new CanvasJS.Chart("chartContainer", {
            title: {
                text: "Westminster Cathedral Building Movement Data"
            },
            data: [{
                type: "line",
                dataPoints: dps
        }]
        });

        var xVal = 0;
         var yVal;
        var updateInterval = 100;
        var dataLength = 500; // number of dataPoints visible at any point

        var updateChart = function (count) {
            count = count || 1;
            // count is number of times loop runs to generate random dataPoints.

            for (var j = 0; j < count; j++) {
                yVal = yVal + relayr.devices().getDeviceData.incomingData;
                dps.push({
                    x: xVal,
                    y: yVal
                });
                xVal++;
            };
            if (dps.length > dataLength) {
                dps.shift();
            }

            chart.render();

        };

        // generates first set of dataPoints
        updateChart(dataLength);

        // update chart after specified time. 
        setInterval(function () {
            updateChart()
        }, updateInterval);

    }

上面的代碼摘自CanvasJS上的此示例。

Answer 1

無需重新生成圖表或在單獨的計時器中具有更新圖表功能。 當您從中繼器獲取數據時，只需更新圖表，如下所示：

var yVal = 0, xVal = 0, dataLength = 500;
var dps = []; // dataPoints

var chart = new CanvasJS.Chart("chartContainer", {
    title: {
        text: "Westminster Cathedral Building Movement Data"
    },
    data: [{
        type: "line",
        dataPoints: dps
    }]
});
relayr.devices().getDeviceData({
    token: toke,
    deviceId: Candle1_deviceId,
    incomingData: function (data) {
        console.log(data.readings[0].meaning);
        console.log(data.readings[0].value);
        yVal = data.readings[0].value;
        dps.push({
            x: xVal,
            y: yVal
        });
        xVal++;

        if (dps.length > dataLength) {
            dps.shift();
        }
        chart.render()
        return data.readings[0].value;
    }
});

Answer 2

使用參數value創建一個額外的函數來創建圖表：

function createChart(value) {
    // Do something with value

    var dps = []; // dataPoints

    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
            text: "Westminster Cathedral Building Movement Data"
        },
        data: [{
            type: "line",
            dataPoints: dps
    }]
    });

    var xVal = 0;
     var yVal;
    var updateInterval = 100;
    var dataLength = 500; // number of dataPoints visible at any point

    var updateChart = function (count) {
        count = count || 1;
        // count is number of times loop runs to generate random dataPoints.

        for (var j = 0; j < count; j++) {
            yVal = yVal + relayr.devices().getDeviceData.incomingData;
            dps.push({
                x: xVal,
                y: yVal
            });
            xVal++;
        };
        if (dps.length > dataLength) {
            dps.shift();
        }

        chart.render();

    };

    // generates first set of dataPoints
    updateChart(dataLength);

    // update chart after specified time. 
    setInterval(function () {
        updateChart()
    }, updateInterval);

}

然后從回調中調用該函數：

window.onload = function () {
    relayr.devices().getDeviceData({
        token: toke,
        deviceId: Candle1_deviceId,
        incomingData: function (data) {
            console.log(data.readings[0].meaning);
            console.log(data.readings[0].value);
            createChart(data.readings[0].value);
            return data.readings[0].value;
        }
    });
}