How to access data from json through javaScript?

Question

I'm trying to make a data visualization with JS, getting the values from a dynamic json file, but I can't get to visualize my data past the console.

The idea is to be able to use those 4 values (outputValue0, outputValue1, outputValue2, outputValue3)to modify a shape and the colors of itself. How should I be calling my variables to access to them in javaScript?

This is my code:

var lines = "waiting for data"; 
var val0 = 0; // I get a 0, of course, but I need the actual value
var val0 = []; //I get nothing with this

function setup() {
createCanvas(400,400);
loadJSON('http://www.----------.com/data_to_json.php', gotData);
}

Object.size = function(obj){
var size = 0, key;
for(key in obj){
    if(obj.hasOwnProperty(key)) size++;
}
return size;
}

function gotData(data) {

var size = Object.size(data) - 1;
console.log(size);
console.log(data[size]['timeStamp']);
console.log(data[size]['outputValue0'] + " " + data[size]['outputValue1'] + " " + data[size]['outputValue2']+ " " + data[size]['outputValue3']);
 lines = size;
 var val0 = data[size]['outputValue0'];

 }

 function draw(){
 background(158, 152, 207);
 textAlign(LEFT);
 fill(0);
 text('Emotional analysis', 10, height - 370);
 text(lines + ' emotions stored',10,height -20);
 text(val0,10,height -60)

 }

I have few errors on my console, but I think it's not related:

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable El uso del sensor de orientación está obsoleto. (the use of the sensor is obsolete) p5.js:9298:6 El uso del sensor de moviento está obsoleto. (the use of the sensor is obsolete) p5.js:9298:6 240 sketch.js:20:3 2019-02-08 22:03:09 sketch.js:21:3 20 20 19 20 sketch.js:22:3

The json file looks like this:

[{"timeStamp":"2019-02-08 13:38:53","outputValue0":"18","outputValue1":"18","outputValue2":"18","outputValue3":"18"},
{"timeStamp":"2019-02-08 13:39:03","outputValue0":"18","outputValue1":"18","outputValue2":"19","outputValue3":"18"},
{"timeStamp":"2019-02-08 13:39:13","outputValue0":"18","outputValue1":"18","outputValue2":"19","outputValue3":"18"},
{"timeStamp":"2019-02-08 13:39:23","outputValue0":"18","outputValue1":"19","outputValue2":"19","outputValue3":"19"},
{"timeStamp":"2019-02-08 13:39:33","outputValue0":"18","outputValue1":"19","outputValue2":"20","outputValue3":"19"}]

What happens when you run this code (errors, unexpected results, etc.)? In particular, what is displayed by those console.log statements inside gotData? — p.s.w.g
– p.s.w.g, Commented Feb 8, 2019 at 21:42
the way you're accessing them now in the console looks to be ok...unless you can tell us about an error? If you want to use them to do something else, then from the gotData function you need to pass them to whatever function you use to modify your shapes. It's unclear what/where that function is, or what arguments it accepts. But surely you know how to call a function? — ADyson
– ADyson, Commented Feb 8, 2019 at 21:43
Bear in mind that once you have parsed a JSON string successfully into a JS variable, it becomes like any other object or array...you can access the properties in the normal way, run loops to go through the data items, etc. It's no different. — ADyson
– ADyson, Commented Feb 8, 2019 at 21:45
Thanks. The results of your console.log() statements inside the gotData() function would be the most relevant thing for us to see, I think. — ADyson
– ADyson, Commented Feb 8, 2019 at 21:46
Not horribly important, and nothing to do with your question, just an observation/caution about using Object.size = function instead of just var size = function. Somewhere down the road, if JavaScript adds a size function to Object, your code would override that function. — Heretic Monkey
– Heretic Monkey, Commented Feb 8, 2019 at 22:15

ADyson · Accepted Answer · 2019-02-08 22:37:59Z

1

You seem to be attempting to populate some global variables. But you've made mistakes with scope, and also this is generally considered a flawed design pattern. Also at the moment you don't seem to have anywhere where you actually call the draw() function.

It would be better for encapsulation perhaps if draw() accepted some parameters e.g.

function draw(val0, val1, val2, val3) {

Then in the gotData function you could write

draw(data[size]['outputValue0'], data[size]['outputValue1'], data[size]['outputValue2'], data[size]['outputValue3']);

to pass the values to it, and alter your shape.

answered Feb 8, 2019 at 22:37

ADyson

62.9k16 gold badges86 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to access data from json through javaScript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related