如何从嵌套JSON提取特定数据？jQuery获取嵌套站点名称遇阻

我来帮你解决这个问题！你现在能打印整个JSON对象却拿不到具体的站点名称，大概率是层级没找对或者JSON还没转成可操作的JS对象，我给你一步步捋清楚：

首先先假设你的嵌套JSON结构是类似这样的（如果和你的实际结构不一样，你只需要对应调整层级就行）：

{
  "data": {
    "siteList": [
      {
        "name": "博客园",
        "url": "cnblogs.com"
      },
      {
        "name": "GitHub",
        "url": "github.com"
      }
    ]
  }
}

第一步：确认JSON已经转成JS对象 #

如果你是从接口直接拿到的字符串格式的JSON，得先转成JavaScript对象才能操作：

// 比如接口返回的是字符串jsonStr
const jObject = JSON.parse(jsonStr);
// 要是用jQuery的$.getJSON方法请求接口，它会自动帮你把JSON字符串转成对象，直接用就行
$.getJSON('你的接口地址', function(jObject) {
  // 这里直接操作jObject
});

第二步：找对层级，遍历提取站点名称 #

比如上面的示例里，站点列表在jObject.data.siteList这个数组里，你需要遍历这个数组才能拿到每个站点的名称：

// 先打印确认层级是否正确，避免拼写错误
console.log(jObject.data.siteList);

// 假设你用来展示的div的id是siteContainer
const $siteContainer = $('#siteContainer');
// 用jQuery的each方法遍历数组
$.each(jObject.data.siteList, function(index, siteItem) {
  // 这里的siteItem就是数组里的每个站点对象，提取name字段
  const siteName = siteItem.name;
  // 把名称插入到div里，比如创建一个p标签或者span
  $siteContainer.append(`<p>${siteName}</p>`);
});

调试小妙招 #

要是还是拿不到，你可以一步步打印层级，快速定位问题：

// 先打印最外层对象
console.log(jObject);
// 再打印下一层
console.log(jObject.data);
// 直到找到站点数组
console.log(jObject.data.siteList);

这样就能很快发现是层级少了一层，还是字段名拼写错了（比如你写的siteItem.siteName但JSON里是siteItem.name）。

给你一个完整的可运行示例，你替换成自己的JSON数据就能用：

<div id="siteContainer"></div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
// 模拟你的嵌套JSON数据
const mockJson = {
  "data": {
    "siteList": [
      {"name": "博客园", "url": "cnblogs.com"},
      {"name": "GitHub", "url": "github.com"},
      {"name": "Stack Overflow", "url": "stackoverflow.com"}
    ]
  }
};

// 页面加载完成后执行
$(function() {
  const $container = $('#siteContainer');
  // 遍历站点数组
  $.each(mockJson.data.siteList, function(i, item) {
    // 把站点名称添加到div中
    $container.append(`<div class="site-name">${item.name}</div>`);
  });
});
</script>

只要对应好你自己的JSON层级和字段名，就能顺利提取并显示站点名称啦！

内容的提问来源于stack exchange，提问作者Aaron Strickland