Question

我的php脚本json_encodes：

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

Answer 1

感谢上面的所有评论，这才是最终的结果：

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

Answer 2

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

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

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

Answer 3

只是为了一个简单的例子

鉴于你有一个像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是一个对象**

您可以通过代码中的key快速访问JSON数据中的任何属性。您基本上有两种方法，使用.属性或[]数组索引表示法进行访问。

Answer 4

loadJSON 是异步的，这意味着数据不会立即可用。 loadJSON 通过填充它在 preload 内部调用时返回的对象的属性来工作，因为在 setup 中的所有异步调用之前，p5 不会调用 draw 或 preload已解决。

根据文档：

<块引用>

在 loadJSON() 内调用 preload() 保证在调用 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.2.0/p5.js"></script>

在 loadJSON 之外使用 preload 时，p5 不会做任何特殊的事情来等待加载完成。文档建议向 loadJSON 提供回调，在响应数据到达时调用该回调：

function setup() {
  const url = "https://jsonplaceholder.typicode.com/posts/1";
  //let title; // wrong! this can't expose data for this block to access
  
  loadJSON(url, data => {
    //title = data.title; // wrong! this won't set the outer 
                          // variable let title; in time for 
                          // the bottom console.log(title)
    
    // correct! now you can consume the data
    console.log(data.title);
  });
  
  //console.log(title); // wrong! title will be undefined here
  noLoop();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>

请记住，loadJSON 不是获取 JSON 数据的唯一方法。您可以使用任何其他库来获取数据。 loadJSON 不会在 p5 函数之外定义。在 Node 上，axios 是一个不错的选择。在浏览器中，fetch 是一个不错的选择。

另请参阅 Return response from asynchronous call 以获取有关上述回调模式的深入指南。您可以承诺回调，并使用此线程中的技术以适合您需要的方式访问响应中的数据（这超出了 p5 的范围和 loadJSON 的正常用例）。

从JSON：P5.js中提取信息

4 个答案: