Разбор данных из API, получение неопределенного

Question

Я новичок в API и хочу добавить API базы данных USDA Nutrients на свой веб-сайт. Я хочу, чтобы пользователь мог искать еду, выбрать один из появившихся результатов и просмотреть информацию о его питании.

Как я могу сделать это на обычном JS? Я создал панель поиска на своем веб-сайте, и JS принимает данные и запрашивает данные из API USDA.

var apiKey = '';
var q = "eggs";

var url = "http://api.nal.usda.gov/ndb/search/?format=json&q=" + q + "&sort=n" + "&max=25" + "&offset=0" + "&api_key=" + apiKey;

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);



xhr.onreadystatechange = function() {

  if (xhr.readyState === 4)  {
  var data = JSON.parse(this.responseText);
  document.querySelector("#usdaResults").innerHTML = data.body;
  }
};
xhr.send();

Я хочу сначала представить пользователю список результатов того, что они искали. Затем, после того, как они щелкают по продукту, я хочу представить его информацию о питании (белок и т. Д.).

РЕДАКТИРОВАТЬ: Когда пользователь ищет еду, я хочу отобразить «группу», «имя» и «ману» всех доступных результатов. В то же время, когда пользователь хочет просмотреть информацию о питании для конкретного продукта из перечисленных, я хочу получить его номер «ndbno» и посмотреть его в базе данных USDA, чтобы я мог отобразить данные после. Так же, как показано на официальном сайте: https://ndb.nal.usda.gov/ndb/search/list?SYNCHRONIZER_TOKEN=c91f87b5-59c8-47e0-b7dc-65b3c067b7ff&SYNCHRONIZER_URI=%2Fndb%2Fsearch%2Flist&qt=&qlookup=egg+potato&ds=&manu=

РЕДАКТИРОВАТЬ 2: Я получаю эту ошибку сейчас.

var apiKey = '';
var q = document.getElementById('search').value;

var url = "http://api.nal.usda.gov/ndb/search/?format=json&q=" + q + "&sort=n" + "&max=25" + "&offset=0" + "&api_key=" + apiKey;

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);

function getData() {
xhr.onreadystatechange = function () {  
    if (xhr.readyState === 4 && xhr.status === 200) {  
          console.log(xhr.responseText)
          var data = JSON.parse(this.responseText);
if (data && data.list && data.list.item) {
  var html = "";
  data.list.item.map(item => {
    let string = "<p>Name: " + item.name + " Manu: " + item.manu + " Group: " + item.group + "<p>";
    html += string;
  })
}
document.querySelector("#usdaResults").innerHTML = html;
    }
       else {  
           console.log("Error", xhr.statusText);  
        }  
    }
xhr.send();
  }

HTML:

<section class="usda"> 
        <h1>USDA Nutrients Database</h1>
        <form id="search">
            <input type="text" placeholder="Search.." name="search">
            <button type="button" onclick="getData();">Search</button>
          </form>
          <div id="usdaResults"></div>
    </section>

Answer 1

Таким образом, возможно, что при вашем вызове XHR возникли ошибки - однако мы можем отловить и записать эти ошибки. Вы хотите открыть инструменты разработчика в браузере (обычно щелкните правой кнопкой мыши> инструменты разработчика), чтобы просмотреть журналы JS.

Я получаю: VM131:20 GET http://api.nal.usda.gov/ndb/search/?format=json&q=eggs&sort=n&max=25&offset=0&api_key= 403 (Forbidden)

Но это потому, что у меня нет API-ключа. Если вы этого не сделаете, вам нужно получить от них ключ API.

Я взял некоторый код из другого SO сообщения, здесь:

var apiKey = '';
var q = "eggs";

var url = "http://api.nal.usda.gov/ndb/search/?format=json&q=" + q + "&sort=n" + "&max=25" + "&offset=0" + "&api_key=" + apiKey;

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);



xhr.onreadystatechange = function (oEvent) {  
    if (xhr.readyState === 4) {  
        if (xhr.status === 200) {  
          console.log(xhr.responseText)  
        } else {  
           console.log("Error", xhr.statusText);  
        }  
    }  
}; 
xhr.send();

Справка:

Ошибка XMLHttpRequest (Ajax)

РЕДАКТИРОВАТЬ:

Что касается ответа, после того, как вы проанализировали JSON - вы можете получить все доступные имена, группы и manu данных, как это было - я вывел детали в тегах

, и это не проверено - так что, возможно, неверно, но это больше для псевдокода.

var data = JSON.parse(this.responseText);
//Assuming data is valid!
if (data && data.list && data.list.item) {
  var html = "";
  data.list.item.map(item => {
    let string = "<p>Name: " + item.name + " Manu: " + item.manu + " Group: " + item.group + "<p>";
    html += string;
  })
}
document.querySelector("#usdaResults").innerHTML = html;