从API解析数据,未定义

时间:2019-06-10 11:32:43

标签: javascript api request

我是API的新手,我想将USDA Nutrients数据库api添加到我的网站。我希望用户能够搜索食物,选择出现的结果之一并查看其营养信息。

如何在普通JS中做到这一点?我已经在网站上创建了一个搜索栏,JS接受了输入并从USDA api请求数据。

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=

EDIT2 :我现在收到此错误。 undefined,0 results found

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>

1 个答案:

答案 0 :(得分: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) Error

编辑:

对于响应,一旦解析了JSON,就可以获取数据的所有可用名称,组和操作表-我已在

标记中输出了详细信息,这是未经测试-可能不正确,但这更多是针对伪代码。

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;