How can I extract the return value of a JSON object and store it in a variable?

Question

How can I extract the return value of a JSON object and store it in a variable?

I am attempting to develop a dynamic chart by utilizing data retrieved from a function housed inside a JSON object.

The JSON object is fetched through the Relayr Javascript API, and looks like this:

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;
            }
        });

My objective is to incorporate data.readings[0].value into the chart as shown below:

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;

            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();

        };

        updateChart(dataLength);

        
        setInterval(function () {
            updateChart()
        }, updateInterval);

    }

The code above is adapted from an example on CanvasJS.

javascript json return return-value

Answer 1

Answer №1

There's no need to constantly regenerate the chart or set up a separate timer for updating it. Simply update the chart whenever new data is received from relayr by following these steps:

var yVal = 0, xVal = 0, dataLength = 500;
var dps = []; // collection of 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

There's no need to constantly regenerate the chart or set up a separate timer for updating it. Simply update the chart whenever new data is received from relayr by following these steps:

var yVal = 0, xVal = 0, dataLength = 500;
var dps = []; // collection of 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 3

Answer №2

Implement an additional function that takes a value parameter to create your chart:

function generateChart(value) {
    // Handle the provided value

    var dataPoints = [];

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

    var xValue = 0;
     var yValue;
    var updateInterval = 100;
    var dataLength = 500; // Number of visible dataPoints at any given time

    var updateGraph = function (counter) {
        counter = counter || 1;

        for (var k = 0; k < counter; k++) {
            yValue = yValue + relayr.devices().getDeviceData.incomingData;
            dataPoints.push({
                x: xValue,
                y: yValue
            });
            xValue++;
        };
        if (dataPoints.length > dataLength) {
            dataPoints.shift();
        }

        chart.render();

    };

    // Generate initial set of dataPoints
    updateGraph(dataLength);

    // Update chart periodically 
    setInterval(function () {
        updateGraph()
    }, updateInterval);

}

Invoke the function outside the callback:

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

Answer 4

Implement an additional function that takes a value parameter to create your chart:

function generateChart(value) {
    // Handle the provided value

    var dataPoints = [];

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

    var xValue = 0;
     var yValue;
    var updateInterval = 100;
    var dataLength = 500; // Number of visible dataPoints at any given time

    var updateGraph = function (counter) {
        counter = counter || 1;

        for (var k = 0; k < counter; k++) {
            yValue = yValue + relayr.devices().getDeviceData.incomingData;
            dataPoints.push({
                x: xValue,
                y: yValue
            });
            xValue++;
        };
        if (dataPoints.length > dataLength) {
            dataPoints.shift();
        }

        chart.render();

    };

    // Generate initial set of dataPoints
    updateGraph(dataLength);

    // Update chart periodically 
    setInterval(function () {
        updateGraph()
    }, updateInterval);

}

Invoke the function outside the callback:

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

How can I extract the return value of a JSON object and store it in a variable?

Answer №1

Answer №2

Similar questions

Issues with AJAX requests failing to fire with the latest version of jQuery

Analyzing DynamoDB Query

Unexpected Error with Background Position Variable

Is it possible to utilize a JSONPath expression to retrieve an altered value from a selected element?

A Beginner's Guide to Understanding Elasticsearch, Logstash, and Kibana without Technical Jargon

Issue encountered when attempting to insert data via node into MySQL database

Troubleshooting: Datepicker not appearing in Bootstrap

Challenges associated with parsing JSON structures that have nested lists and dictionaries

Having trouble with loading JavaScript during ng build --prod process

Steps for generating a fresh JSON object during each loop iteration

Tips for managing Express.js callbacks and modifying an object's property from within a function

I am looking for information on how to properly handle HTTP errors in Axios when utilizing a blob responseType in VueJs

Can you explain the meaning of arguments[0] and arguments[1] in relation to the executeScript method within the JavascriptExecutor interface in Selenium WebDriver?

Reversing the order of input-group-addon and input in bootstrap on mobile devices

Is there a way to retrieve the current route on a custom 404 page in Next.JS?

Unexpected color changes when hovering over sparkline graphs

"Converting PostgreSQL data into a PHP array with the column serving as the index

Place a div element directly into a specific cell within the table

Transforming a React, Redux, and MUI Menu into an Electron Application

Implementing a soft transition to intl-tel-input plugin