Question

网址是正确的;当我在浏览器中输入它时，我得到了JSON数据，但在调用jQuery的GET请求后，数据没有显示在我的页面上。怎么样？

HTML代码：

<html>
<head></head>
    <body>
        <h4 id="test">yo</h4>
    </body>
</html>

JS代码：

function getNutrition() {
 $.getJSON("https://api.nal.usda.gov/ndb/search/?format=json&q=banana&max=25&ds=Standard%20Reference&offset=0&api_key=rWKfuG6YjQU9h0WMNksynapfFqcr3BJWK5giCqRQ").then(function(data) {
    // $('h4').html(data.list.item[0]);
    $('#test').html(data);
})}

getNutrition();

Answer 1

由于item[0]是JSON 对象，因此您没有看到任何内容。尝试从item[0].name或item[0].group中获取正确的属性如果您想打印您感兴趣的JSON部分 - 请使用JSON.stringify

function getNutrition() {
  $.getJSON("https://api.nal.usda.gov/ndb/search/?format=json&q=banana&max=25&ds=Standard%20Reference&offset=0&api_key=rWKfuG6YjQU9h0WMNksynapfFqcr3BJWK5giCqRQ").then(function(data) {
    // console.dir(data);
    $('h4').html(data.list.item[0].name);
    $('#test').html(JSON.stringify(data, null, 2));
  })
}

getNutrition();

<h4></h4>
<pre id="test"></pre>


<script src="//code.jquery.com/jquery-3.1.0.js"></script>

Answer 2

如果要在页面上显示json，则需要以任何方式解析json。

最简单的方法是使用JSON.stringify()：

$('#test').html(JSON.stringify(data));

无法获取JSON数据jQuery

2 个答案: