如何用jQuery获取动态JSON的键与值并生成指定HTML结构

针对动态JSON（结构、数据组数不固定）转目标HTML结构的需求，以下是基于JavaScript的实现方案，可适配任意键值组合的JSON条目：

实现步骤 #

1. 准备页面容器 #

先在页面中添加用于承载生成内容的容器：

<div id="contentContainer"></div>

2. 核心JavaScript逻辑 #

通过异步请求获取JSON数据，遍历每一组数据的键值对，动态拼接目标HTML结构并插入页面：

// 目标JSON接口地址
const jsonUrl = 'https://amp.gmail.dev/playground/public/ssr_amp_list';

// 获取页面容器元素
const container = document.getElementById('contentContainer');

// 发起请求并处理数据
fetch(jsonUrl)
  .then(response => {
    if (!response.ok) throw new Error('请求失败');
    return response.json();
  })
  .then(data => {
    // 假设JSON核心数据存于items数组（可根据实际结构调整）
    const items = data.items || [];
    let finalHtml = '';

    // 遍历每一组数据
    items.forEach(item => {
      let setHtml = '<div class="mySet">';
      // 遍历当前条目所有键值对
      Object.entries(item).forEach(([key, value]) => {
        setHtml += `
          <span class="myKey">${key}</span> - <span class="myValue">${value}</span>
        `;
      });
      setHtml += '</div>';
      finalHtml += setHtml;
    });

    // 将生成的HTML插入容器
    container.innerHTML = finalHtml;
  })
  .catch(error => {
    console.error('数据处理出错:', error);
    container.innerHTML = '<p>加载数据失败，请稍后重试</p>';
  });

3. 可选样式美化 #

如果需要优化展示效果，可添加基础CSS：

.mySet {
  border: 1px solid #eee;
  padding: 12px;
  margin: 10px 0;
  border-radius: 4px;
}
.myKey {
  font-weight: 600;
  color: #2d3748;
}
.myValue {
  color: #4a5568;
  margin-left: 4px;
}

关键说明 #

• 动态适配结构：使用Object.entries()遍历数据条目，无论JSON的键名、数量如何变化，都能自动生成对应HTML元素。
• 异步与错误处理：通过fetch异步获取数据，避免阻塞页面，同时添加异常捕获逻辑，提升稳定性。
• 结构灵活性：若JSON核心数据数组不是items，只需修改data.items为实际数组键名即可适配。

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