如何用JavaScript动态生成含JSON键值对的ul列表？

核心实现思路 #

通过Object.entries()遍历JSON对象的键值对，结合DOM API动态创建列表项，完全避免手动拼接字符串，同时保证内容安全。

基础代码示例（单对象数据） #

假设接口返回单个JSON对象（比如{"userId":1,"id":1,"title":"test"}），代码如下：

// 获取页面上的目标ul容器
const dataList = document.getElementById('data-list');

// 发起请求获取JSON数据
fetch('你的接口地址')
  .then(res => res.json())
  .then(data => {
    // 遍历对象的所有键值对
    Object.entries(data).forEach(([key, value]) => {
      // 创建li元素
      const listItem = document.createElement('li');
      // 设置键值对文本
      listItem.textContent = `${key}: ${value}`;
      // 将li添加到ul中
      dataList.appendChild(listItem);
    });
  })
  .catch(err => console.log('请求出错:', err));

针对数组数据的扩展（多对象场景） #

如果接口返回JSON数组（比如[{"userId":1,"id":1}, {"userId":2,"id":2}]），可以嵌套遍历生成层级列表：

const dataList = document.getElementById('data-list');

fetch('你的接口地址')
  .then(res => res.json())
  .then(dataArray => {
    dataArray.forEach(item => {
      // 创建外层li包裹单个对象的所有键值对
      const outerItem = document.createElement('li');
      const innerList = document.createElement('ul');
      
      // 遍历单个对象的键值对
      Object.entries(item).forEach(([key, value]) => {
        const innerItem = document.createElement('li');
        innerItem.textContent = `${key}: ${value}`;
        innerList.appendChild(innerItem);
      });
      
      outerItem.appendChild(innerList);
      dataList.appendChild(outerItem);
    });
  });

关键细节说明 #

• Object.entries(data)：将对象转换为[[key1, value1], [key2, value2]]格式的数组，自动枚举所有键值对，无需手动指定键名
• document.createElement()：通过DOM API创建元素，比字符串拼接更安全（避免XSS风险），也更易维护
• textContent：设置元素文本内容，自动转义特殊字符，替代innerHTML进一步提升安全性

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