jquery - 使用 jQuery 迭代 .getJSON 响应

Question

我知道已经有一百万个问题与此相关，但我找不到答案。我想做的就是迭代 JSON 数组(和对象)并使用 jQuery 的 .each() 方法打印出它的所有值。

{
    "items": [{
        "new_active_users": 3,
        "total_users": 179757,
        "badges_per_minute": 0.05,
        "total_badges": 318126,
        "total_votes": 720066,
        "total_comments": 346593,
        "answers_per_minute": 0.02,
        "questions_per_minute": 0.01,
        "total_answers": 97538,
        "total_accepted": 35924,
        "total_unanswered": 6162,
        "total_questions": 61943,
        "api_revision": "2019.8.29.34367"
    }],
    "has_more": false,
    "quota_max": 300,
    "quota_remaining": 299
}

我几乎没有使用过 JSON，我找到的示例并没有解释如何使用 jQuery 的 .each() 方法迭代数组中的数组 。我可以找到大量简单数组的示例，但没有一个是这样构造的。我只是努力思考自己做错了什么。

现在我已经设法打印出一些数组，但我不知道如何访问“items”中的数组。

获取请求

// JavaScript Document
$(function(){
    $("#get-info").click(function(){
        var $text = $(".post-text");
        $.getJSON("/json/se-codereview-info.txt", function(data){
            $.each(data, function(key, val){
                $text.append(key + ":" + val + "<br>");
            });
        });
    });
});

响应

items:[object Object]
has_more:false
quota_max:300
quota_remaining:299

我尝试了几种不同的方法来尝试访问项目，但没有任何效果对我有用。在第一个 .each() 方法中使用 key.items 或 key["items"] 或使用 data.items code> 或 data["items"] 在第一个 .each() 方法之外，我尝试一起删除循环并开始尝试获取 items 中的任何值，但是我正在努力这样做。我尝试了很多不同的方法，但我已经无法理解了。我试图保持一致，我认为我可以使用下面的内容访问内部数组。

获取请求V2

// JavaScript Document
$(function(){
    $("#get-info").click(function(){
        var $text = $(".post-text");
        $.getJSON("/json/se-codereview-info.txt", function(data){
            $.each(data, function(key, val){
                $.each(val["items"], function(key_i, val_i){
                    $text.append(key_i + ":" + val_i + "<br>");
                });
            });
        });
    });
});

如果您能提供任何帮助或对我做错的事情的解释，或者过去 2 天我一直在寻找的帖子的链接，我将不胜感激。

这些是我已经访问过的一些页面，并没有解释如何解决这个问题。

• https://api.jquery.com/jquery.each/
• https://www.w3schools.com/jquery/ajax_getjson.asp
• jquery loop on Json data using $.each
• jQuery "each" method
• JQuery - Iterating JSON Response

Answer 1

当您要了解 JavaScript 脚本中的数据时，建议使用 console.log(variable)。

例如，console.log(data.items) 会将其输出到开发人员的控制台。

{
        "new_active_users": 3,
        "total_users": 179757,
        "badges_per_minute": 0.05,
        "total_badges": 318126,
        "total_votes": 720066,
        "total_comments": 346593,
        "answers_per_minute": 0.02,
        "questions_per_minute": 0.01,
        "total_answers": 97538,
        "total_accepted": 35924,
        "total_unanswered": 6162,
        "total_questions": 61943,
        "api_revision": "2019.8.29.34367"
}

这是 data.items 遵循的结构，是一个由键(例如 new_active users、api_revision 等)和值(例如分别为 3、2019.8.29.34367)。

因此，要访问每个键和值，我们使用 JQuery，

// JavaScript Document
$(function(){
    $("#get-info").click(function(){
        var $text = $(".post-text");
        $.getJSON("/json/se-codereview-info.txt", function(data) {
            $.each(data.items, function(key, val){
                $text.append(key + ":" + val + "<br>");
            });
        });
    });
});