如何用JS GET请求接收并直观展示指定结构的JSON数据？

针对你的需求，直接用原生JavaScript就能搞定，不用纠结嵌套数组——服务器返回的结构已经很清晰，直接拿来用就行。下面是具体步骤和代码示例：

1. 发送GET请求并解析JSON #

用浏览器原生的fetch API发送请求，它比传统的XMLHttpRequest更简洁，新手易上手。请求成功后直接将响应转为JSON对象，就能直接访问里面的year和data数组。

示例代码：

// 替换成你的服务器接口地址
const apiUrl = '你的API接口URL';

fetch(apiUrl)
  .then(response => {
    // 检查请求是否成功
    if (!response.ok) {
      throw new Error('请求失败');
    }
    // 把响应转成JSON对象
    return response.json();
  })
  .then(result => {
    // 这里拿到的result就是服务器返回的完整数据
    console.log('年份:', result.year);
    console.log('乐队列表:', result.data);
    // 调用渲染函数展示数据
    renderBandList(result.data);
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

2. 渲染数据到页面 #

遍历data数组，把每个乐队的信息生成对应的HTML元素，插入到页面容器中。可以给每个乐队做一个卡片式布局，包含图片、乐队链接、成员和介绍人信息。

先在页面里准备容器：

<!-- 页面中预留的展示容器 -->
<div id="band-container"></div>

然后写渲染函数：

function renderBandList(bandList) {
  const container = document.getElementById('band-container');
  
  // 遍历每个乐队数据
  bandList.forEach(item => {
    // 创建单个乐队的卡片元素
    const card = document.createElement('div');
    card.className = 'band-card'; // 用于后续美化样式
    
    // 拼接图片HTML
    const imageHtml = `
      <img src="${item.image.source}" alt="${item.image.title}" />
    `;
    
    // 拼接乐队名称链接
    const bandHtml = `
      <h3><a href="${item.band.url}">${item.band.name}</a></h3>
    `;
    
    // 处理入选成员信息
    let membersHtml = '<p>入选成员：暂无</p>';
    if (item.inducted_members.length > 0) {
      membersHtml = `<p>入选成员：${item.inducted_members.join(', ')}</p>`;
    }
    
    // 处理介绍人信息（根据实际结构调整）
    let inductedByHtml = '<p>介绍人：暂无</p>';
    if (Object.keys(item.inducted_by).length > 0) {
      inductedByHtml = `<p>介绍人：<a href="${item.inducted_by.url}">${item.inducted_by.name}</a></p>`;
    }
    
    // 把所有内容拼入卡片
    card.innerHTML = `
      ${imageHtml}
      ${bandHtml}
      ${membersHtml}
      ${inductedByHtml}
    `;
    
    // 将卡片添加到容器中
    container.appendChild(card);
  });
}

3. 美化样式（可选） #

加一点CSS让展示更友好，比如给卡片加边框、间距，让图片自适应：

.band-card {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  max-width: 400px;
}

.band-card img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 12px;
}

.band-card h3 {
  margin-top: 0;
}

关于嵌套数组的疑虑 #

你完全不用手动构建嵌套数组，服务器返回的data本身就是一个数组，每个元素已经包含了image、band等嵌套对象，直接遍历这个数组就能拿到所有数据，比自己手动整理更高效，也不容易出错。

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