获取诺贝尔奖JSON数据后调用filter报is not a function错误排查

• 你调用filter方法的names不是数组：await res.json()返回的是整个JSON根对象，结构为{"prizes": [...]}，它是普通JS对象，没有数组的filter方法，直接调用自然会报方法不存在的错误。
• 获奖者数据不在JSON根层级：你要筛选的获奖者信息存储在每个prizes数组元素的laureates字段里，你需要先把所有获奖者汇总成一个一维数组，再做筛选。
• 你的代码里还存在一处笔误：事件绑定代码addEventLienter code herestener中间插入了多余字符串，修复filter问题后还要修改这个笔误，否则会抛出事件绑定相关错误。

const search = document.getElementById('search');
const matchlist = document.getElementById('match-List');

// 缓存请求结果，避免每次输入重复发请求
let laureatesCache = null;

const searchName = async searchText => {
    // 输入为空时直接返回空结果
    if (!searchText.trim()) {
        console.log([]);
        return;
    }
    // 首次请求时拉取数据并缓存
    if (!laureatesCache) {
        const res = await fetch('../data/prize.json');
        const prizeData = await res.json();
        // 汇总所有获奖者为一维数组
        laureatesCache = prizeData.prizes.flatMap(prize => prize.laureates || []);
    }
    // 筛选匹配的获奖者
    // 注意如果要支持特殊字符搜索，需要先对searchText做正则转义
    const matchRegex = new RegExp(`^${searchText}`, 'gi');
    const matching = laureatesCache.filter(laureate => laureate.firstname.match(matchRegex));
    console.log(matching);
};

search.addEventListener('keyup', () => searchName(search.value));

如果需要兼容不支持flatMap的旧环境，可以用reduce替代汇总逻辑：

laureatesCache = prizeData.prizes.reduce((list, prize) => {
    return list.concat(prize.laureates || [])
}, [])

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