Javascript 从JSON:P5.js中提取信息

我的php脚本json_编码如下：

[{"x":"20","y":"24","name":"NewNov"},{"x":"20","y":"70","name":"Tito"}]

但是我不知道如何在我的p5.js程序中提取这些信息

比如说，我需要使用这些“x”、“y”、“name”在适当的位置用正确的名称画一个圆

我在脚本中使用了loadJSON，现在我有了一个变量-

data = loadJSON()

但是，比如说，我如何从JSON中获取“x”组件呢

var radius;

function preload() {
    var url = 'http://localhost/planetTrequest.php';
    radius = loadJSON(url);
}

function setup() {
    createCanvas(300, 300);
    background(153);
    noLoop();
}

function draw() {
    background(200);
    textSize(15);
    text(radius.x, 10, 30);
    fill(0, 102, 153);
}

---

您的数据位于一个包含两个对象（JSON）的数组中

---

firstObj.x

从第一个json返回x。

举个简单的例子

假设您有一个类似JSON的输入返回：

var data = [{"x":"20","y":"24","name":"NewNov"},{"x":"20","y":"70","name":"Tito"}];

如果要从该数组中的每个元素中提取

x

、

y

、

name

，可以执行以下操作：

for (var element of data){
    // Your element is in format : 
    // {"x":"20","y":"24","name":"NewNov"}

    // To get X
    var x = element.x; // or element["x"]
    // To get Y
    var y = element.y; // or element["y"]
    // To get name
    var name = element.name; // or element["name"]

    // Do whatsoever with your element
    // ...
}

**JSON是一个对象**

---

您可以通过其

键

快速访问JSON数据中的任何属性，如上述代码所示。基本上有两种方法，使用

属性或

[]

数组索引表示法进行访问。

多亏了上面的所有注释，这就是最终有效的方法：

 var data;

 function preload() {
 var url = 'http://localhost/planetTrequest.php';
 data = loadJSON(url);
 }

 function setup() {
 createCanvas(300, 300);
 background(153);
 noLoop();
 }

 function draw() {
 background(200);
 textSize(15);
 text(data[0].name, 10, 30);
 fill(0, 102, 153);
 }  

是异步的，这意味着数据不会立即可用

loadJSON

通过填充在

preload

内部调用时返回的对象的属性来工作，因为在

preload

中的所有异步调用解决之前，p5不会调用

setup

或

draw

根据文件：

在

preload（）

内部调用

loadJSON（）

可以保证在调用

setup（）

和

draw（）

之前完成操作

正常设置如下所示：

let data；//全局公开结果对象的变量
函数预加载（）{
/*端点以获取具有'title'属性的JSON示例：
{“标题”：“除可选择的补救措施外，必须重新制定计划”}
*/
常量url=”https://jsonplaceholder.typicode.com/posts/1";
data=loadJSON（url）；//获取对以下占位符对象的引用：
//将在绘制/设置之前填写
console.log（data.title）；//保证未定义！
//p5尚未等待呼叫完成
}
函数设置（）{
createCanvas（500150）；
noLoop（）；
console.log（data.title）；//定义了data.title！
}
函数绘图（）{
背景（200）；
文本大小（15）；
textAlign（居中，居中）；
text（data.title，宽度/2，高度/2）；//定义了data.title！
}

---

井数据/radius将成为一个数组，因此可以这样访问它，即：

数据[0].x，数据[0].y，数据[1].x，数据[1].name

，使用循环（for，while等）在数组上循环感谢您的努力，我尝试了您的变体，但似乎我做错了什么。您能给我一个示例吗？

 var data;

 function preload() {
 var url = 'http://localhost/planetTrequest.php';
 data = loadJSON(url);
 }

 function setup() {
 createCanvas(300, 300);
 background(153);
 noLoop();
 }

 function draw() {
 background(200);
 textSize(15);
 text(data[0].name, 10, 30);
 fill(0, 102, 153);
 }