如何通过javascript访问json中的数据？答案

【问题标题】：How to access data from json through javaScript?如何通过javascript访问json中的数据？
【发布时间】：2019-02-08 21:39:45
【问题描述】：

我正在尝试使用 JS 进行数据可视化，从动态 json 文件中获取值，但我无法通过控制台可视化我的数据。

这个想法是能够使用这 4 个值（输出值 0、输出值 1、输出值 2、输出值 3）来修改形状和自身的颜色。我应该如何调用我的变量以在 javaScript 中访问它们？

这是我的代码：

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)

 }

我的控制台上几乎没有错误，但我认为这不相关：

InvalidStateError：尝试使用不可用或不再可用的对象 El uso del sensor de orientación está obsoleto。（传感器的使用已过时） p5.js:9298:6 El uso del sensor de moviento está obsoleto。（传感器的使用已过时） p5.js:9298:6 240 草图.js:20:3 2019-02-08 22:03:09 草图.js:21:3 20 20 19 20 sketch.js:22:3

json 文件如下所示：

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

【问题讨论】：

运行此代码时会发生什么（错误、意外结果等）？特别是gotData 中的那些console.log 语句显示了什么？
您现在在控制台中访问它们的方式看起来没问题...除非您可以告诉我们一个错误？如果您想使用它们来做其他事情，那么您需要从 gotData 函数将它们传递给您用来修改形状的任何函数。目前尚不清楚该函数是什么/在哪里，或者它接受什么参数。但是你肯定知道如何调用函数吗？
请记住，一旦你成功地将一个 JSON 字符串解析为一个 JS 变量，它就变得像任何其他对象或数组一样......你可以以正常方式访问属性，运行循环去通过数据项等。没有什么不同。
谢谢。我认为，你在 gotData() 函数中的console.log() 语句的结果对我们来说是最相关的。
不是很重要，与您的问题无关，只是对使用Object.size = function 而不是var size = function 的观察/警告。在未来的某个地方，如果 JavaScript 将 size 函数添加到 Object，您的代码将覆盖该函数。

标签： javascript arrays json database data-visualization

【解决方案1】：

您似乎正在尝试填充一些全局变量。但是您在范围方面犯了错误，这通常被认为是一种有缺陷的设计模式。同样，目前您似乎没有任何地方可以实际调用 draw() 函数。

如果draw() 接受一些参数，例如

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

然后在 gotData 函数中你可以写

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

将值传递给它，并改变你的形状。

【讨论】：