如何获取 JSON 对象的返回值作为变量答案

【问题标题】：How do I get return value of a JSON object as a variable如何获取 JSON 对象的返回值作为变量
【发布时间】：2016-06-10 22:12:39
【问题描述】：

我正在尝试使用从 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上的这个例子。

【问题讨论】：

你必须意识到 relayr.devices().getDeviceData 不能将数据直接发送到图表，因为它与 callback 一起使用

标签： javascript json return return-value

【解决方案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;
    }
});

【讨论】：

【解决方案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;
        }
    });
}

【讨论】：