如何为API返回对象中的True值项生成按钮（原生JS实现）

前置准备 #

先确保页面里有一个用来放置按钮的空容器：

<div id="button-container"></div>

完整实现代码 #

document.addEventListener('DOMContentLoaded', async () => {
  try {
    // 替换成你的实际API接口地址
    const response = await fetch('https://your-api-address.com/data');
    const data = await response.json();

    // 获取页面上的按钮容器
    const buttonContainer = document.getElementById('button-container');

    // 遍历对象的键值对，筛选出值为true的项
    Object.entries(data).forEach(([itemName, isEnabled]) => {
      if (isEnabled) {
        // 创建按钮元素
        const btn = document.createElement('button');
        btn.textContent = itemName;
        
        // 可选：给按钮添加样式或点击事件
        btn.style.padding = '6px 12px';
        btn.style.margin = '4px';
        btn.addEventListener('click', () => console.log(`点击了${itemName}按钮`));
        
        // 将按钮添加到容器中
        buttonContainer.appendChild(btn);
      }
    });
  } catch (err) {
    console.error('数据加载失败:', err);
  }
});

核心逻辑说明 #

• 用DOMContentLoaded事件确保页面DOM加载完成后再执行代码，避免找不到目标容器。
• Object.entries()把JSON对象转换成[键名, 布尔值]格式的数组，方便遍历筛选。
• 遍历过程中判断值是否为true，仅为符合条件的项创建按钮，直接插入到页面容器内。
• 用async/await处理异步GET请求，比传统回调更易读，同时通过try/catch捕获请求异常。

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