如何将电影列表的genre_ids匹配对应类型名并新增GENRE_NAME字段

算力阿峰

2026-9-26

修正后可直接运行的代码

const setTrendFilm = async () => {
    const dataTrendFilm = await fetch(
      api_base + api_key 
    );
    const genres = await fetch(
      api_base2 + api_key
    );

    const responseFilms = await dataTrendFilm.json();
    const responseGenres = await genres.json();

    // 预构建类型ID到名称的映射表，大幅提升查找效率
    const genreIdMap = {};
    // 兼容接口返回格式：如果返回的是带genres字段的对象就取genres，否则直接用返回的数组
    const genreList = responseGenres.genres || responseGenres;
    genreList.forEach(item => {
      genreIdMap[item.id] = item.name;
    });

    // 处理每部电影，拼接类型名称
    const formattedFilms = responseFilms.results.map(film => {
      // 匹配每个genre id对应的名称，匹配不到返回兜底文本避免报错
      const GENRE_NAME = film.genre_ids.map(id => genreIdMap[id] ?? '未知类型');
      // 合并原字段和新增字段，不修改原始数据
      return {
        ...film,
        GENRE_NAME
      };
    });

    // formattedFilms 就是你需要的最终结果数组
    console.log(formattedFilms);
    return formattedFilms;
};

原有代码的问题说明

map方法的返回值没有被接收，处理逻辑运行了但结果没有被保存
filter返回的是符合条件的元素组成的数组，不能直接.name取值，会得到undefined，如果不做映射表也可以用find返回单个对象后再取name
没有给电影对象新增GENRE_NAME字段，也没有把处理后的对象存入结果数组