Two line chart from HTTP request

Dashboard
1

I'm trying to create a two line chart this tutorial.

My flow looks like this:

image
image799Ă—224 10.6 KB

The response from the rest API is this:
{"201201/tempUoTwoBalco": {"value": 62.98999786376953, "route": "/vui/platforms/benshome/devices/201201/tempUoTwoBalco", "writable": false}, "201201/tempUoThreeBalco": {"value": 74.12999725341797, "route": "/vui/platforms/benshome/devices/201201/tempUoThreeBalco", "writable": false}, "201201/Oat": {"value": 89.99999237060547, "route": "/vui/platforms/benshome/devices/201201/Oat", "writable": false}, "201201/RmTmpSpt": {"value": 79.99999237060547, "route": "/vui/platforms/benshome/devices/201201/RmTmpSpt", "writable": true}, "201201/RmTmp": {"value": NaN, "route": "/vui/platforms/benshome/devices/201201/RmTmp", "writable": false}, "201201/UhCmd": {"value": 0, "route": "/vui/platforms/benshome/devices/201201/UhCmd", "writable": false}, "201201/GlblHtgDsbl": {"value": 0, "route": "/vui/platforms/benshome/devices/201201/GlblHtgDsbl", "writable": false}}

Can someone give me a tip on how to parse out these two sensor reading values from the API response?

> {"201201/tempUoTwoBalco": {"value": 62.98999786376953, "route": "/vui/platforms/benshome/devices/201201/tempUoTwoBalco", "writable": false}, "201201/tempUoThreeBalco": {"value": 74.12999725341797`

In my function block would I want to loop through the API response to find these values or am I track like this below?

var supplyTemp = {};
var returnTemp = {};


supplyTemp.payload = supplyTemp.payload["201201/tempUoThreeBalco"];
supplyTemp.topic = 'Line1';


returnTemp.payload = returnTemp.payload["201201/tempUoTwoBalco"];
returnTemp.topic = 'Line2';


return [supplyTemp,returnTemp];
2

Try this you where not using msg.payload or the value.

var supplyTemp = {};
var returnTemp = {};


supplyTemp.payload = msg.payload["201201/tempUoThreeBalco"].value;
supplyTemp.topic = 'Line1';


returnTemp.payload = msg.payload["201201/tempUoTwoBalco"].value;
returnTemp.topic = 'Line2';


return [[supplyTemp,returnTemp]];

Also you need extra [ ] to send both msg to same output on function node.
You may want to add some conditional to only send msg's if the data from api exists and is correct.

3

Any chance you could give me a javascript tip for what you are describing? I am somewhat a newbie

var data = {

            "201201/tempUoTwoBalco":

                {"value": 63.1199951171875, "route": "/vui/platforms/benshome/devices/201201/tempUoTwoBalco", "writable": false},

            "201201/tempUoThreeBalco":

                {"value": 74.12999725341797, "route": "/vui/platforms/benshome/devices/201201/tempUoThreeBalco", "writable": false},

            "201201/Oat":

                {"value": 89.99999237060547, "route": "/vui/platforms/benshome/devices/201201/Oat", "writable": false},

            "201201/RmTmpSpt":

                {"value": 79.99999237060547, "route": "/vui/platforms/benshome/devices/201201/RmTmpSpt", "writable": true},

            "201201/RmTmp":

                {"value": NaN, "route": "/vui/platforms/benshome/devices/201201/RmTmp", "writable": false},

            "201201/UhCmd":

                {"value": 0, "route": "/vui/platforms/benshome/devices/201201/UhCmd", "writable": false},

            "201201/GlblHtgDsbl":

                {"value": 0, "route": "/vui/platforms/benshome/devices/201201/GlblHtgDsbl", "writable": false}

};

console.log(data)

var supplyTemp = {};

var returnTemp = {};

sensor1 = "/vui/platforms/benshome/devices/201201/tempUoTwoBalco"

sensor2 = "/vui/platforms/benshome/devices/201201/tempUoThreeBalco"

for(var key in data){

    for(var key1 in data[key]){

        if(key1 === sensor1){

            console.log("sensor1 found "+ data[key][key1])

        };

        if(key1 === sensor2){

            console.log("sensor2 found "+ data[key][key1])

        };

    };

};
4
5 
var data = {

            "201201/tempUoTwoBalco":

                {"value": 63.1199951171875, "route": "/vui/platforms/benshome/devices/201201/tempUoTwoBalco", "writable": false},

            "201201/tempUoThreeBalco":

                {"value": 74.12999725341797, "route": "/vui/platforms/benshome/devices/201201/tempUoThreeBalco", "writable": false},

            "201201/Oat":

                {"value": 89.99999237060547, "route": "/vui/platforms/benshome/devices/201201/Oat", "writable": false},

            "201201/RmTmpSpt":

                {"value": 79.99999237060547, "route": "/vui/platforms/benshome/devices/201201/RmTmpSpt", "writable": true},

            "201201/RmTmp":

                {"value": NaN, "route": "/vui/platforms/benshome/devices/201201/RmTmp", "writable": false},

            "201201/UhCmd":

                {"value": 0, "route": "/vui/platforms/benshome/devices/201201/UhCmd", "writable": false},

            "201201/GlblHtgDsbl":

                {"value": 0, "route": "/vui/platforms/benshome/devices/201201/GlblHtgDsbl", "writable": false}

};

let supplyTemp = null;
let returnTemp = null;

const sensor1 = "201201/tempUoTwoBalco";
const sensor2 = "201201/tempUoThreeBalco";


for(var key1 in data){
    if(key1 === sensor1){
        supplyTemp = {};
        supplyTemp.payload = data[key1].value;
        supplyTemp.topic = 'Line1';
    }else if(key1 === sensor2){
        returnTemp = {};
        returnTemp.payload = data[key1].value;
        returnTemp.topic = 'Line2';
    }

}
return [[supplyTemp,returnTemp]];

[edit]
or more dynamic, you add sensors in sensor object, no need to edit code to add sensors. It would output 3 lines to chart if you added one more sensor in the object.

[{"id":"f2a105a1.b216","type":"inject","z":"c791cbc0.84f648","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"201201/tempUoTwoBalco\":{\"value\":63.1199951171875,\"route\":\"/vui/platforms/benshome/devices/201201/tempUoTwoBalco\",\"writable\":false},\"201201/tempUoThreeBalco\":{\"value\":74.12999725341797,\"route\":\"/vui/platforms/benshome/devices/201201/tempUoThreeBalco\",\"writable\":false},\"201201/Oat\":{\"value\":89.99999237060547,\"route\":\"/vui/platforms/benshome/devices/201201/Oat\",\"writable\":false},\"201201/RmTmpSpt\":{\"value\":79.99999237060547,\"route\":\"/vui/platforms/benshome/devices/201201/RmTmpSpt\",\"writable\":true},\"201201/RmTmp\":{\"value\":\"NaN\",\"route\":\"/vui/platforms/benshome/devices/201201/RmTmp\",\"writable\":false},\"201201/UhCmd\":{\"value\":0,\"route\":\"/vui/platforms/benshome/devices/201201/UhCmd\",\"writable\":false},\"201201/GlblHtgDsbl\":{\"value\":0,\"route\":\"/vui/platforms/benshome/devices/201201/GlblHtgDsbl\",\"writable\":false}}","payloadType":"json","x":310,"y":840,"wires":[["1d5fa17768faa0ad"]]},{"id":"1d5fa17768faa0ad","type":"function","z":"c791cbc0.84f648","name":"","func":"//create a look up table for sensors required and chart line name\nconst sensors = {\"201201/tempUoTwoBalco\": \"supplyTemp\", \n    \"201201/tempUoThreeBalco\": \"returnTemp\"};\n//set the payload to data    \nlet data = msg.payload;\n// set output to null\nlet temps = {};\nfor(const element of Object.values(sensors)){\n    temps[element] = null;\n}\n// loop through data getting keys\nfor(const key1 in data){\n    if( sensors[key1] ){ // checkif key in sensor lookup\n        temps[sensors[key1]] = {};  //initialise object\n        temps[sensors[key1]].payload = data[key1].value; // add payload\n        temps[sensors[key1]].topic = sensors[key1]; // add topic\n    }\n}\n// create return array\ntemps = Object.values(temps);\nreturn [temps];","outputs":1,"noerr":0,"initialize":"","finalize":"","x":470,"y":800,"wires":[["e8823236e6e79e37"]]},{"id":"e8823236e6e79e37","type":"debug","z":"c791cbc0.84f648","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":620,"y":840,"wires":[]}]
1 Like
6

Thanks for posting the full flow... Curious to ask if I connect this to a chart, is there anything I need to configure on the chart to make it plot the data? Would you have any tips to debug the output of the function to see why the chart isnt populating any data?

There's no errors, I do get this 1json parse error` but I can see the data from the API just fine.

image
image1687Ă—695 60.6 KB

Here's the function:

image
image702Ă—878 33.7 KB

Chart:

image
image549Ă—715 18.5 KB

GET Request:

image
image547Ă—631 15.7 KB

Thanks for all the tips

7

Hard to see any setting in the images. Or read the code.
The http node is outputting a string you need to set it to output on parse json object. Or the the NaN in the returned payload is not letting the http node parse the data.
My last function should feed into chart node with no issues.

8

the http node I do have return set on the drop down to a parsed json object

If the NaN does not let the http node parse properly, would you know any work arounds or how to investigate further?

9

I would first try to fix the source of the NaN.
If you can not do that then you would output a utf-8 string from the http node.
Then you could replace the NaN with a suitable value. Then use JSON.parse() to convert back to an object.

[{"id":"f2a105a1.b216","type":"inject","z":"c791cbc0.84f648","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{    \"201201/tempUoTwoBalco\": {        \"value\": 63.1199951171875,        \"route\": \"/vui/platforms/benshome/devices/201201/tempUoTwoBalco\",        \"writable\": false    },    \"201201/tempUoThreeBalco\": {        \"value\": 74.12999725341797,        \"route\": \"/vui/platforms/benshome/devices/201201/tempUoThreeBalco\",        \"writable\": false    },    \"201201/Oat\": {        \"value\": 89.99999237060547,        \"route\": \"/vui/platforms/benshome/devices/201201/Oat\",        \"writable\": false    },    \"201201/RmTmpSpt\": {        \"value\": 79.99999237060547,        \"route\": \"/vui/platforms/benshome/devices/201201/RmTmpSpt\",        \"writable\": true    },    \"201201/RmTmp\": {        \"value\": NaN,        \"route\": \"/vui/platforms/benshome/devices/201201/RmTmp\",        \"writable\": false    },    \"201201/UhCmd\": {        \"value\": 0,        \"route\": \"/vui/platforms/benshome/devices/201201/UhCmd\",        \"writable\": false    },    \"201201/GlblHtgDsbl\": {        \"value\": 0,        \"route\": \"/vui/platforms/benshome/devices/201201/GlblHtgDsbl\",        \"writable\": false    }}","payloadType":"str","x":310,"y":840,"wires":[["1d5fa17768faa0ad"]]},{"id":"1d5fa17768faa0ad","type":"function","z":"c791cbc0.84f648","name":"","func":"//create a look up table for sensors required and chart line name\nconst sensors = {\"201201/tempUoTwoBalco\": \"supplyTemp\", \n    \"201201/tempUoThreeBalco\": \"returnTemp\"};\n//set the payload to data    \nlet data = msg.payload.replace(\"NaN\", \"null\");\ntry {\n  data = JSON.parse(data)\n}\ncatch(err) {\n  data ={};\n}\n// set output to null\nlet temps = {};\nfor(const element of Object.values(sensors)){\n    temps[element] = null;\n}\n// loop through data getting keys\nfor(const key1 in data){\n    if( sensors[key1] ){ // checkif key in sensor lookup\n        temps[sensors[key1]] = {};  //initialise object\n        temps[sensors[key1]].payload = data[key1].value; // add payload\n        temps[sensors[key1]].topic = sensors[key1]; // add topic\n    }\n}\n// create return array\ntemps = Object.values(temps);\nreturn [temps];","outputs":1,"noerr":0,"initialize":"","finalize":"","x":470,"y":800,"wires":[["e8823236e6e79e37"]]},{"id":"e8823236e6e79e37","type":"debug","z":"c791cbc0.84f648","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":620,"y":840,"wires":[]}]
10

Thank you for all your help working great...

11

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.