JavaScript报错banned_users不存在，但对象实际包含该键的问题

1. 核心问题：Promise回调结构错误 #

你处理banned_users的代码块没有放在.then(data => { ... })的回调函数内部，而是写在了回调外面。这会导致这段代码在Promise回调执行前就运行，此时data根本不是接口返回的对象，自然读取不到banned_users，出现undefined。

2. 次要问题：对象不能直接用forEach遍历 #

返回的banned_users是键值对对象（{"test":{}}），不是数组，直接调用forEach会报错。需要用对象遍历方法来处理。

修正后的完整代码 #

fetch('/admin_info')
    .then(response => response.json())
    .then(data => {
      console.log(data);
      // 处理admins的逻辑保持不变
      data.admins.forEach((admin) => {
        var list_admin = document.createElement('li');
        if (admin != data.owner && admin != data.admin_username) {
          list_admin.className = 'list_admin';
          list_admin.onclick = function (){
            remove_admin(admin);
          }
        }
        list_admin.id = `admin_${admin}`;
        list_admin.innerText = admin == data.owner ? `${admin} (Owner)` : admin;
        admin_list.appendChild(list_admin);
      });

      // 把banned_users处理逻辑移到回调内部
      const bannedUsers = data.banned_users;
      console.log(bannedUsers);

      // 遍历对象的键（用户名）
      Object.keys(bannedUsers).forEach((user) => {
        var bannedUserLi = document.createElement('li');
        bannedUserLi.className = 'banned_user';
        bannedUserLi.innerText = user;
        // 注意：是把li添加到列表容器，不是反过来
        banned_list.appendChild(bannedUserLi);
      });
    })
    .catch(error => {
      error_display.style.display = 'block';
      error_text.innerText = `Admin Panel failed to load: ${error}`;
    });

关键说明 #

• 回调结构修正：所有依赖data的逻辑必须放在.then(data => { ... })的回调函数内部，确保接口返回数据后再执行。
• 对象遍历方式：
  • 用Object.keys(bannedUsers)获取所有被封禁的用户名数组
  • 如果需要处理用户对应的详细数据，用Object.values(bannedUsers)获取值数组
  • 用Object.entries(bannedUsers)可以同时获取用户名和对应数据
• DOM操作修正：原代码中banned_user.appendChild(banned_list)逻辑颠倒，应该是把创建的li元素添加到列表容器banned_list中。

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