无法访问Datamuse API返回的JSON数据？p5.js技术问题

嘿，这问题我熟！你这是栽在了异步加载的坑里啦！

问题根源 #

p5.js的loadJSON()是异步操作——它会立刻开始请求数据，但不会等数据加载完成再执行后面的代码。你原来的代码里，刚调用loadJSON(url)就马上访问data[0]，这时候服务器还没把数据传回来呢！虽然控制台后来能看到完整的data数组，但那是数据加载完成后p5.js自动更新的，你的同步代码早已经跑完了，所以当时访问data其实还是undefined，自然拿不到data[0]。

正确的解决方法 #

方法1：用回调函数（p5.js官方推荐的写法）

把处理数据的逻辑放进loadJSON的第二个参数（回调函数）里，这个函数只会在数据完全加载完成后才会执行：

var str = "apple";
var url = 'https://api.datamuse.com/words?ml=' + str + '&max=2';

// 数据加载完成后，回调函数会自动拿到加载好的data
loadJSON(url, function(data) {
  console.log(data); // 现在能看到完整的数组
  console.log(data[0].word); // 顺利拿到第一个对象的word值！
  // 所有需要用到data的代码都写在这里面
});

方法2：用async/await（更现代的异步写法）

如果你熟悉ES6的异步语法，也可以把代码放在async函数里，用await等待数据加载完成：

async function getRelatedWords() {
  var str = "apple";
  var url = 'https://api.datamuse.com/words?ml=' + str + '&max=2';
  var data = await loadJSON(url); // 暂停执行，直到数据加载完成
  console.log(data[0].word); // 正常访问属性
}

// 在p5的setup函数里调用这个异步函数
function setup() {
  getRelatedWords();
}

为什么你之前的尝试都失败了？ #

你之前写的console.log(data[0])、forEach循环、Object.entries(data)[0]都是在数据加载完成前执行的，那时候data还没被赋值为加载后的数组，所以输出都是undefined。而typeof data显示object，是因为p5.js的loadJSON在异步模式下会先返回一个空的对象占位，后续再填充数据。

更新：问题已解决
感谢帮助，我已经通过回调函数的方式解决了问题，调整后的代码可以正常访问数据中的对象属性了。

内容的提问来源于stack exchange，提问作者TheFlyBiker 420