JSON.parse解析列表失败，遇Uncaught (in promise) TypeError错误求助

错误原因分析 #

1. 响应内容格式不规范且处理错误
   接口返回的是被双引号包裹、内部用单引号的字符串：

   "[{'message': 'amazing', 'sent_by': 'Tester Wupx'}, {'message': 'wow', 'sent_by': 'Tester Wupx'}, {'message': 'name', 'sent_by': 'guest'}]"
   这种格式不符合JSON标准（JSON要求键和字符串值必须用双引号），你手动替换的方式不仅没解决单引号问题，还额外包裹了一层对象，后续解析后循环逻辑完全错误。

2. 循环逻辑错误
   你用for (const i in Object.keys(json))遍历的是Object.keys(json)的索引（此时Object.keys(json)是["auto"]，索引只有0），然后取json["auto"][i]，相当于取json["auto"]["0"]，但json["auto"]是数组，应该用数字索引，字符串索引"0"会导致取不到值，最终触发Cannot read properties of undefined错误。

3. 变量未声明导致全局污染
   arr和json没有用let/const声明，会变成全局变量，可能引发意外的覆盖问题。

4. fetch写法混用await和then
   同时使用await和.then()会导致代码逻辑混乱，增加调试难度。

修正后的代码 #

async function getNewMessages() {
  try {
    const response = await fetch(`/get_new_messages/s/${sId}`);
    let body = await response.text();
    
    // 处理响应内容：去掉外层双引号，替换单引号为双引号，符合JSON规范
    body = body.replace(/^"|"$/g, '').replace(/'/g, '"');
    const jsonData = JSON.parse(body);
    
    const messageList = document.querySelector('.channel-messages ul');
    messageList.innerHTML = '';

    // 直接遍历消息数组
    for (const obj of jsonData) {
      messageList.insertAdjacentHTML('beforeend', `
        <li style="padding-left: 10px; color: white; width: 100%;" 
            onmouseover="this.style.background = '#535357'; this.style.color = 'white';" 
            onmouseout="this.style.background = 'transparent'; this.style.color = 'white';">
          <b>
            <img src="/assets/images/Goobler-meowsicles.png" width="40"/> 
            <span onclick="">${obj.sent_by}</span> 
            <span class="badge" style="background: mediumpurple;">TESTER <i class="fa fa-check"></i></span> 
          </b> <br>
          ${obj.message}
        </li>
      `);
      console.log(obj);
    }
  } catch (error) {
    console.error('获取消息出错:', error);
  }
}

关键修正点 #

• 规范处理响应字符串：先移除外层多余双引号，将单引号替换为双引号，确保能正确解析为JSON数组。
• 直接遍历解析后的消息数组，避免错误的索引循环。
• 使用const声明变量，避免全局污染。
• 统一用await处理异步操作，添加try/catch捕获错误，便于调试。
• 优化HTML字符串写法，移除不必要的const collection = this.children（代码中未使用），替换自定义的<onclickFunc>为标准<span>标签。

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