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

Tips for updating the minimum value to the current page when the button is pressed on the input range

What is the best way to calculate the total duration (hh:mm) of all TR elements using jQuery?

The Response type does not include a property named 'results'

Using AngularJS to show content based on a callback function

Evolution of the material through a fresh new slide

Using single quotation marks in Javascript

Error message states: "An error occurred while attempting to parse the json file

Improprove the Express Router in a Node.js application

Display HTML components depending on an object's property using AngularJS

When using Next JS with StoryBook, an error may occur if styles are written in a module.scss file

What potential issues arise from utilizing useRef alongside useSelector?

disable full page scrolling on iOS devices

Using JSON data with UITableView in an IOS Objective-C application

Is there a way to detect when a Bootstrap Alert is displayed?

Choose a specific inner div element within another div using jQuery

Update a nested object key by concatenating key names with "." to create a string

Instructions on converting Dart to JavaScript for a non-web platform

Updating content with jQuery based on radio button selection

Converting Typescript library into a standalone global JavaScript file

Sending a string data from client to a MongoDB database using Express.js and Node.js with the help of Sails framework