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

lo8azlld  于 2022-12-25  发布在  Java
关注(0)|答案(4)|浏览(170)

我的php脚本json_encoded这个:

[{"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);
}
7tofc5zh

7tofc5zh1#

感谢上面所有的评论,这就是最后起作用的:

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);
 }
oyxsuwqo

oyxsuwqo2#

您的数据位于包含两个对象(jsons)的数组中。

var firstObj = data[0]; // get the first element from array
var secondObj = data[1]; // get the second element

firstObj.x从第一个json返回x。

5n0oy7gb

5n0oy7gb3#

举个简单的例子

假设您有一个以JSON形式返回的输入,例如:

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

如果要从该数组中的每个元素提取xyname,可以执行以下操作:

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是一个对象

通过key可以快速访问JSON数据中的任何属性,基本上有两种方法,通过.属性或[]数组索引符号访问。

ogsagwnx

ogsagwnx4#

loadJSON是异步的,这意味着数据不会立即可用。loadJSON的工作方式是填充在preload内部调用时返回的对象上的属性,因为p5在preload中的所有异步调用都已解决之前不会调用setupdraw
根据文件:
preload()内部调用loadJSON()可以保证在调用setup()draw()之前完成操作。
正常设置如下所示:

let data; // expose the result object's variable globally

function preload() {
  /* endpoint to get an example JSON with a `title` property: 
      {"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit"} 
  */
  const url = "https://jsonplaceholder.typicode.com/posts/1";

  data = loadJSON(url);    // get a reference to a placeholder object that 
                           // will be filled in before draw/setup

  console.log(data.title); // guaranteed to be undefined!
                           // p5 hasn't waited for the call to complete yet
}

function setup() {
  createCanvas(500, 150);
  noLoop();
  console.log(data.title); // data.title is defined!
}

function draw() {
  background(200);
  textSize(15);
  textAlign(CENTER, CENTER);
  text(data.title, width / 2, height / 2); // data.title is defined!
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>

当在preload之外使用loadJSON时,p5不会做任何特殊的事情来等待加载完成。文档建议为loadJSON提供一个回调函数,在响应数据到达时调用该函数:
一个二个一个一个
请记住,loadJSON不是获取JSON数据的唯一方法。您可以使用任何其他库来获取数据。loadJSON不会在p5函数之外定义。在节点上,axios是一个不错的选择。在浏览器中,fetch是一个不错的选择。
参见Return response from asynchronous call,获取上面回调模式的深度指南,你可以承诺回调,或者在这个线程中使用技术,以一种适合你需要的方式访问响应中的数据(这超出了p5的范围和loadJSON的正常用例)。

相关问题