如何从电影API返回的JSON对象中访问指定数据字段？

开发影视查询应用时，输入影片标题后能获取到包含结果的对象，但无法访问返回结果中带编号的电影列表里的具体数据（如标题、图片等），尝试点运算符、方括号都报错。以下是示例返回JSON和当前使用的JavaScript代码：

示例返回JSON #

{
  "0": {"adult": false, "backdrop_path": "/v3ClsT59peXyGJ4XuDvIQAPwcZy.jpg", "genre_ids": [2], "id": 4133, "original_language": "en", ...},
  "1": {"adult": false, "backdrop_path": null, "genre_ids": [1], "id": 1197042, "original_language": "ca", ...},
  "2": {"adult": false, "backdrop_path": null, "genre_ids": [1], "id": 1114948, "original_language": "en", ...},
  "3": {"adult": false, "backdrop_path": null, "genre_ids": [], "id": 400489, "original_language": "en", ...},
  "4": {"adult": false, "backdrop_path": null, "genre_ids": [1], "id": 468158, "original_language": "en", ...},
  "5": {"adult": false, "backdrop_path": "/63HcRYJI4LKeo8sINlL71ZtlUFY.jpg", "genre_ids": [1], "id": 147, "original_language": "fr", ...}
}

当前JavaScript代码 #

const getFilm = async(film) => {
  let titles = [];
  const response = await fetch(`https://api.themoviedb.org/3/search/movie?query=${film}&api_key=3a8e699848eee9f846905172e427dce7`)
    .then(response => response.json())
    .then(data => {
      const keys = Object.keys(data.results)
      keys.forEach(film => {
        console.log(data.results[film])
      })
    })
}

getFilm('Avengers');

核心问题分析 #

你当前的代码混用了async/await和.then()，且对data.results的遍历方式不够高效。另外，TMDB的search/movie接口实际返回的results是标准数组，而非你示例中的类数组对象，这可能是你对返回结构的误解。

优化后的代码（适配TMDB真实返回结构） #

直接遍历results数组，统一使用async/await写法，清晰访问目标字段：

const getFilm = async(film) => {
  let titles = [];
  // 发起请求并解析JSON
  const response = await fetch(`https://api.themoviedb.org/3/search/movie?query=${film}&api_key=3a8e699848eee9f846905172e427dce7`);
  const data = await response.json();

  // 遍历结果数组，提取需要的数据
  data.results.forEach(movie => {
    // 直接访问电影的具体字段
    console.log('电影标题:', movie.title);
    console.log('海报路径:', movie.poster_path);
    console.log('电影ID:', movie.id);
    // 将标题存入数组
    titles.push(movie.title);
  });

  console.log('所有查询到的标题:', titles);
}

getFilm('Avengers');

若返回确实是类数组对象（适配你提供的示例结构） #

如果data.results真的是带数字键的对象，用Object.values()将其转为数组后再遍历：

const getFilm = async(film) => {
  let titles = [];
  const response = await fetch(`https://api.themoviedb.org/3/search/movie?query=${film}&api_key=3a8e699848eee9f846905172e427dce7`);
  const data = await response.json();

  // 将类数组对象转为标准数组
  const movies = Object.values(data.results);
  movies.forEach(movie => {
    console.log('电影标题:', movie.title);
    titles.push(movie.title);
  });

  console.log('所有查询到的标题:', titles);
}

getFilm('Avengers');

关键注意事项 #

• 保持代码风格统一：避免async/await和.then()混用，前者可读性更强。
• 确认字段名一致性：确保你访问的字段（如title、poster_path）与接口返回的字段完全匹配。
• 调试优先：如果仍报错，先打印console.log(data.results)确认其类型（数组/对象），再调整遍历逻辑。

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