如何从指定格式JSON文件提取id和name并填充HTML的select组件？

完全明白你的需求——要把JSON数组里的用户id和name提取出来，塞进页面上的<select>里对吧？下面给你两种常用的实现方式，你可以根据自己的场景选：

情况1：JSON数据已存在于变量中 #

如果已经通过后端注入、本地缓存等方式拿到了JSON数据，可以直接用同步逻辑处理：

// 假设这是你从.json文件获取到的用户数据数组
const userData = [
  { "endpoint":"10.0.0.2", "id":1, "identifiers":["0x002","0x003"], "name":"user_one", "ping":21 },
  { "endpoint":"10.0.0.3", "id":2, "identifiers":["0x004","0x005"], "name":"user_two", "ping":28 }
];

// 获取页面上的select元素
const selectElement = document.getElementById('select');

// 先清空下拉框（避免重复添加数据）
selectElement.innerHTML = '';

// 遍历用户数据，逐个创建option并添加到select中
userData.forEach(user => {
  const option = document.createElement('option');
  option.value = user.id; // 将id设为option的value值（方便后续获取选中的用户ID）
  option.textContent = user.name; // 将name设为option的显示文本
  selectElement.appendChild(option);
});

情况2：需要从.json文件异步拉取数据 #

如果需要动态从后端的.json文件获取数据，就用fetch API来处理异步请求，代码如下：

// 获取页面上的select元素
const selectElement = document.getElementById('select');

// 发起请求获取JSON数据
fetch('你的用户数据文件路径，比如/users.json')
  .then(response => {
    if (!response.ok) {
      throw new Error('请求用户数据失败');
    }
    return response.json();
  })
  .then(userData => {
    // 清空下拉框
    selectElement.innerHTML = '';
    // 遍历生成option
    userData.forEach(user => {
      const option = document.createElement('option');
      option.value = user.id;
      option.textContent = user.name;
      selectElement.appendChild(option);
    });
  })
  .catch(error => {
    console.error('处理数据时出错：', error);
    // 可选：添加错误提示选项
    selectElement.innerHTML = '<option value="">加载用户列表失败，请重试</option>';
  });

额外小技巧 #

• 如果你想给下拉框加一个默认提示选项（比如“请选择用户”），可以在遍历前先创建并添加：

  const defaultOption = document.createElement('option');
  defaultOption.value = '';
  defaultOption.textContent = '请选择用户';
  selectElement.appendChild(defaultOption);
  

• 注意确保你的JSON文件路径正确，若涉及跨域请求，需要服务器配置相应的CORS规则。

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