如何通过Key检索JSON数据？fetch获取数据后无法获取指定用户信息

首先得指出你踩的两个核心坑：一是解析响应的方式不对，二是数据结构和大小写匹配有问题，咱们一步步来解决：

第一个问题：错误使用response.text() #

你现在用response.text()拿到的是字符串格式的响应内容，不是可操作的JavaScript对象/数组——这就是为什么调用find会报“find is not a function”，也没法用response[username]直接访问数据的原因。你需要把它换成response.json()，这个方法会自动把JSON字符串解析成JS能直接操作的数组/对象。

第二个问题：数据结构与大小写匹配 #

你的JSON是一个数组，每个数组元素都是单个键值对（键是用户名，值是用户数据），而且你的username变量是'merMan'，但JSON里对应的键是'mermAn'（注意第二个字母的大小写差异），这也会导致匹配失败。

修正后的完整代码 #

const username = 'merMan'; 
// 注意：如果要精准匹配JSON里的键，建议改成'mermAn'，或者用下面的大小写兼容写法
fetch("./datz.json") 
  .then(response => response.json()) // 替换成json()解析成JS对象
  .then((data) => { 
    // 方法1：精准匹配用户名（注意大小写）
    const userItem = data.find(item => item.hasOwnProperty(username));
    
    // 方法2：兼容大小写的匹配方式（推荐，避免大小写拼写问题）
    // const userItem = data.find(item => {
    //   const storedUsername = Object.keys(item)[0];
    //   return storedUsername.toLowerCase() === username.toLowerCase();
    // });

    if (userItem) {
      // 从匹配到的对象中提取用户数据
      const targetUserData = userItem[Object.keys(userItem)[0]];
      console.log('找到用户数据：', targetUserData);
    } else {
      console.log('未找到该用户的数据');
    }
  })
  .catch(err => console.error('请求或解析出错：', err)); // 别忘了加错误捕获，方便调试

额外优化建议（如果能修改接口结构的话） #

如果可以控制接口返回的JSON格式，建议把数组改成对象结构，比如：

{
  "mermAn": {"baseMapId":"459cc334740944d38580455a0a777a24", ...},
  "catWoman": {"baseMapId":"459cc334740944d38580455a0a777a24", ...},
  "Riddler": {"baseMapId":"459cc334740944d38580455a0a777a24", ...}
}

这样解析后直接用data[username]就能拿到目标数据，不需要遍历数组，效率会更高。

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