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"}]

Answer 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 eg

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.