JavaScript中flatMap处理API响应数据失效问题求助

问题诊断 #

你的代码核心问题在于处理API返回的JSON对象时，错误使用了Array.from(json)。API返回的json是包含Pagination和People属性的单个对象，而非数组。Array.from(json)会将对象的键名（如"Pagination"、"People"）转为数组元素，后续flatMap(o => o.People)无法获取到实际人员列表，导致people数组为空，筛选逻辑根本没机会执行。

修正方案 #

直接从JSON对象中提取People数组即可，同时优化筛选逻辑的可读性：

// 假设前置fetch逻辑已正确获取API数据
.then((response) => response.json())
.then((json) => {
    // 直接提取人员数组，无需多余转换
    const people = json.People;
    return people.filter(person => {
        const employer = person?.organization?.company?.employer;
        
        // 若employer不存在或非字符串，保留该条目
        if (!employer || typeof employer !== 'string') {
            return true;
        }
        // 检查employer是否不包含任何过滤关键词
        return !filteredEmployers.some(filterStr => employer.includes(filterStr));
    });
})

代码说明 #

1. 获取人员列表：通过json.People直接拿到API返回的人员数组，避免不必要的数组转换操作。
2. 筛选逻辑优化：
   • 用!filteredEmployers.some(...)替代原every写法，逻辑更直观：只要有一个过滤关键词匹配，就排除该条目；反之则保留。
   • 增加!employer判断，覆盖employer为null或undefined的边界情况，处理更严谨。

验证结果 #

用你提供的API响应数据测试，修正后的代码会返回期望结果：

[
  {
    name: 'TJ',
    job: 'Software Engineer',
    organization: { company: { employer: 'amazon', department: 'IT' } },
    location: { city: 'Boston', state: 'Massachusetts' }
  },
  {
    name: 'Dominique',
    job: 'CEO',
    organization: { company: { employer: 'IBM', department: 'IT' } },
    city: 'Seattle',
    state: 'Washington'
  }
]

内容的提问来源于stack exchange，提问作者e-driver1