Не удается получить доступ к данным JSON на API данных - PullRequest
Новая
       1

Не удается получить доступ к данным JSON на API данных

0 голосов
/ 12 мая 2018

Я сделал это на 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"
          ]
      }
 ]

Как и ожидалось, но проблема возникает, когда вы пытаетесь получить доступ к значению «слова», скажем, первого объекта. Я пытался сделать: 

    console.log(data[0]);

, который выводит «undefined» в консоли. Я также попытался перебрать каждый элемент объекта, скажем, цикл forEach, но ничего не работает. Я даже попробовал: 

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

и показывает неопределенное.

Запись в консоль typeof data выводит «объект» Как это можно сделать?

Обновление: исправлена ​​ошибка Благодаря помощи Nenad Vracar мне удалось решить эту проблему. Мой код в настоящее время размещен в codepen. DEMO

1 Ответ

0 голосов
/ 13 мая 2018

Загрузите json в функцию preload и затем используйте ее в 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, чтобы создать http GET запрос к вашему URL изsetup или любая другая часть кода и параметров может динамически. 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();
}
...