无法获取 JSON 数据 jQuery答案

【问题标题】：Can't get JSON data jQuery无法获取 JSON 数据 jQuery
【发布时间】：2017-09-09 20:48:31
【问题描述】：

网址正确；当我在浏览器中输入它时，我得到了 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();

【问题讨论】：

data的值是多少，什么时候调用getNutrition？带有id 测试的元素是否存在，当您调用getNutrition 时它是否存在？这里没有足够的细节。
jsfiddle.net/mgbve3w1
@SpencerWieczorek 我添加了更多代码。是的，定义了 ID 测试，我确实调用了 getNutrition()。运行代码时控制台没有返回错误消息。数据没有按应有的方式显示。
见我上面的小提琴。只需使用 data.list.item[0].name 或您感兴趣的任何属性名称来代替 data.list.item[0]。

标签： jquery json undefined getjson

【解决方案1】：

如果你想在你的页面上显示json，你需要先用任何方式解析json。

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

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

【讨论】：

我在编写的另一个代码中有点困惑，因为我没有使用 JSON.stringify 而是像上面那样调用数据，并且我能够成功取回 JSON 数据。我以为 $.getJSON 会自动处理解析？这种特殊情况需要使用 JSON.stringify 有什么不同吗？
JSON — JavaScript Object 表示法。它与随意的对象或数组非常相似。要访问其内容，您需要对其进行解析。例如使用JSON.parse() 将其转换为对象。当您可以使用循环打印它时。 $.getJSON 是 $.ajax({ url: url, dataType: 'json', data: data, success: callback }); 的短版
您需要用<pre> 或<textarea> 将其包裹起来以保持JSON.stringify(data) 格式。

【解决方案2】：

由于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>

【讨论】：

每当我想发出 JSON 获取请求时，是否必须使用 JSON.stringify？它需要先转换数据并将其解析为字符串，但我认为 $.getJSON 可以处理吗？因为作为我写的另一个代码的一部分，我没有使用 JSON.stringify 而是像上面那样调用数据，并且我能够成功取回 JSON 数据。
另外，对于我注释掉的代码行，我专门针对第一个对象，当我按照您的建议对数据调用 JSON.stringify 时会显示该对象