【问题标题】：Iterate .getJSON response with jQuery使用 jQuery 迭代 .getJSON 响应
【发布时间】：2020-01-16 06:01:06
【问题描述】：

我知道已经有上百万个问题与此相关，但我找不到答案。我要做的就是遍历一个 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() 方法迭代 数组中的数组。我可以找到大量简单数组的示例，但没有一个是这样结构化的。我只是在努力解决我做错的事情。

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

获取请求

// 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"] 或在第一个 .each() 方法之外使用 data.items 或 data["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 天中我做错了什么的任何帮助或解释或指向我一直在寻找的帖子的链接，我将不胜感激。

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

【问题讨论】：

标签： jquery arrays json

【解决方案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>");
            });
        });
    });
});

【讨论】：

【解决方案2】：

下面是如何在没有 jQuery 的情况下一路向下迭代，这种迭代不需要。

<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> -->
    <script>
      // $(function() {
      // });
      // Convert to JSON to make sure everything works
      var json = JSON.stringify({
        '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
      });
      // Convert back to object
      var object = JSON.parse(json);
      // Iterate through object properties
      for (var property in object){
        var value = object[property];
        console.log(property, value);
        // If property is item, iterate through array
        if (property === 'items') {
          value.forEach(function(item) {
            // Iterate through item properties
            for (var _property in item){
              var _value = item[_property];
              console.log(_property, _value);
            }
          });
        }
      }
    </script>
  </head>
  <body>
  </body>
</html>

【讨论】：

【解决方案3】：

使用您的示例，我创建了一个通用函数 objectToHTML() 以递归地将对象转换为 HTML 字符串。该函数循环遍历任何对象，如果任何对象属性是数组或普通对象，那么它将使用相同的函数处理它，同时传递一个前缀来表示已处理的父对象。

查看下面的代码：

function objectToHTML(data, prefix) {
  var output = '';
  // Default prefix to empty string
  prefix = prefix || '';
  
  $.each(data, function(key, val) {
    if ($.isArray(val) || $.isPlainObject(val)) {
      // process the val item with the same function
      output += objectToHTML(val, prefix + key + '.');
    } else {
      output += prefix || '';
      output += key + ": " + val + "<br>"
    }
  });

  return output;
}

var dataObj = {
  "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
}

$('body').append(objectToHTML(dataObj))

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：