无法访问 datamuse api 上的 JSON 数据

Question

我已经在 p5.js:

  var str = "apple";
  var url = 'https://api.datamuse.com/words?ml='+str+ '&max=2';
  var data = loadJSON(url);
  console.log(data);

数据在控制台上显示为：

  [
      {
          "word": "malus pumila",
          "score": 23704,
          "tags": [
             "syn",
             "n",
             "prop"
           ]
      },
      {
          "word": "orchard apple tree",
          "score": 23704,
          "tags": [
             "syn",
             "n"
          ]
      }
 ]

这是预期的，但是当您尝试访问第一个对象的 'word ' 键的值时，问题就出现了。我试过这样做：

    console.log(data[0]);

在控制台输出 'undefinded'。我还尝试循环遍历对象的每个项目，比如 forEach 循环，但没有任何效果。我什至尝试过：

    console.log(Object.entries(data)[0]);

并且显示未定义。

控制台日志记录 typeof data 输出 'object'。这怎么能做到？

更新：错误修复 由于 Nenad Vracar's help, I successfully managed to solve this. My code is currently hosted in codepen. DEMO

Answer 1

在preload函数中加载json，然后在setup中使用它，而且看起来数据是对象而不是数组，所以你可以使用一些对象方法来迭代它. DEMO

var data;

function preload() {
  var str = "apple";
  var url = "https://api.datamuse.com/words?ml=" + str + "&max=2";
  data = loadJSON(url);
}

function setup() {
  createCanvas(400, 400);
  console.log(data[0].word);

  Object.values(data).forEach(obj => console.log(obj.word));
}

function draw() {
  background(220);
  noLoop();
}

不确定 p5 是否可行，但您可以使用 Axios 之类的库从 setup 或任何其他部分创建对您的 url 的 http GET 请求代码和参数可以是动态的。 DEMO

function setup() {
  const canvas = createCanvas(400, 400);
  canvas.mousePressed(() => {
    var str = "apple";
    var url = "https://api.datamuse.com/words?ml=" + str + "&max=2";

    axios.get(url)
      .then(({data}) => {
        data.forEach(({word}) => console.log(word))
      }).catch(err => console.log(err))
  })
}

function draw() {
  background(220);
  noLoop();
}

无法访问 datamuse api 上的 JSON 数据

Cannot access JSON data on datamuse api

javascript

json

javascript-objects

p5.js