如何通过p5js中的URL从JSON文件加载数据？

如何解决如何通过p5js中的URL从JSON文件加载数据？

我正在观看有关从URL加载JSON的YouTube教程，并尝试过：

function setup() {
  loadJSON("http://api.open-notify.org/astros.json",gotData,'jsonp');
}

function gotData(data)
{
  for(var i = 0; i<data.number;i++)
    print(data.people[i].name);
}

我遇到错误：

* p5.js说：加载JSON文件时似乎出现了问题。尝试检查文件路径（http://api.open-notify.org/astros.json）是否正确，在线托管文件或运行本地服务器。（有关更多信息，请访问https://github.com/processing/p5.js/wiki/Local-server）*

出什么问题了？

解决方法

根据您的'jsonp'调用中的第三个参数（loadJSON），您试图将astros.json作为JSONP资源加载。

但是，astros.json是一个简单的JSON，而不是JSONP。

{"number": 3,"people": [{"craft": "ISS","name": "Chris Cassidy"},{"craft": "ISS","name": "Anatoly Ivanishin"},"name": "Ivan Vagner"}],"message": "success"}

此外，根据loadJSON's documentation，数据类型必须在回调之前，并且也是可选的：

loadJSON（路径，[jsonpOptions]， [数据类型]，[回调]， [errorCallback]）

loadJSON（路径，数据类型，[回调]， [错误回调]）

loadJSON（path， callback， [errorCallback]）

因此尝试使用值'json'：

loadJSON("http://api.open-notify.org/astros.json",'json',gotData);

或者没有它：

loadJSON("http://api.open-notify.org/astros.json",gotData);

我复制并粘贴了您的代码，至少对我来说工作正常。没有错误，我可以在浏览器（谷歌浏览器）的控制台中看到内容/数据。

在我的草图中，我收到了与您所描述的相同的错误消息，但是阅读我发现在我的 json 地址中，它写的是“https://”，并且应该是“http://”没有“s”。这解决了我的问题。

另一个问题是：您使用的是本地主机吗？互联网浏览器的安全性一直在提高，这可能是导致错误的原因。

也许你应该在 p5 编辑器中试试这个代码，看看你是否得到相同的结果。

无论有没有 jsonp 参数，您的代码都可以工作，但您需要在 local web server 上运行它。

Daniel Shiffman 有详细的p5.js local web server video tutorial。

此外，您可以安装 p5.js mode for Processing，它会使用 Processing IDE 为您启动本地网络服务器

按处理草图窗口右侧的 Java（和向下箭头）按钮
按添加模式...
通过Fathom Information Design选择p5.js模式，然后按安装

安装后，您可以将代码粘贴到新的 p5.js 模式处理草图中并运行它。这将为您启动一个本地网络服务器并在您的默认浏览器中打开该页面。

（要进行更改，我建议在处理中按保存然后刷新页面，因为再次按运行将启动另一个本地 Web 服务器）

或者，您可以尝试为 Sam Lavigne's p5-vscode 扩展 VS Code