【问题标题】:Getting the First object of a Response.Json() object [duplicate]获取 Response.Json() 对象的第一个对象 [重复]
【发布时间】:2022-01-25 00:47:25
【问题描述】:

我有这个代码:

fetch("https://rickandmortyapi.com/api/character/?name=Rick")
    .then((response) => {
      response.json().then((data) => {
       console.log(JSON.stringify(data))
    }).catch( (error) => {
        console.log(`Error: ${error}`)
    })
   })

有问题的 api 并不重要,问题是 response.json() 返回一个对象数组,我有点迷路,我想选择某个索引来选择该对象但我不能,我尝试了多种方法,但不工作,不仅仅是一个简单的答案,我想如果它可能解释对象如何与 response.json() 一起工作,如果 javascript 中的简单对象不同,谢谢。

编辑:这是代码的输出

{"info":{"count":107,"pages":6,"next":"https://rickandmortyapi.com/api/character/?page=2&name=Rick","prev":null},"results":[{"id":1,"name":"Rick Sanchez","status":"Alive","species":"Human","type":"","gender":"Male","origin":{"name":"Earth (C-137)","url":"https://rickandmortyapi.com/api/location/1"},"location":{"name":"Citadel of Ricks","url":"https://rickandmortyapi.com/api/location/3"},"image":"https://rickandmortyapi.com/api/character/avatar/1.jpeg","episode":["https://rickandmortyapi.com/api/episode/1","https://rickandmortyapi.com/api/episode/2","https://rickandmortyapi.com/api/episode/3","https://rickandmortyapi.com/api/episode/4","https://rickandmortyapi.com/api/episode/5","https://rickandmortyapi.com/api/episode/6","https://rickandmortyapi.com/api/episode/7","https://rickandmortyapi.com/api/episode/8","https://rickandmortyapi.com/api/episode/9","https://rickandmortyapi.com/api/episode/10","https://rickandmortyapi.com/api/episode/11","https://rickandmortyapi.com/api/episode/12","https://rickandmortyapi.com/api/episode/13","https://rickandmortyapi.com/api/episode/14","https://rickandmortyapi.com/api/episode/15","https://rickandmortyapi.com/api/episode/16","https://rickandmortyapi.com/api/episode/17","https://rickandmortyapi.com/api/episode/18","https://rickandmortyapi.com/api/episode/19","https://rickandmortyapi.com/api/episode/20","https://rickandmortyapi.com/api/episode/21","https://rickandmortyapi.com/api/episode/22","https://rickandmortyapi.com/api/episode/23","https://rickandmortyapi.com/api/episode/24","https://rickandmortyapi.com/api/episode/25","https://rickandmortyapi.com/api/episode/26","https://rickandmortyapi.com/api/episode/27","https://rickandmortyapi.com/api/episode/28","https://rickandmortyapi.com/api/episode/29","https://rickandmortyapi.com/api/episode/30","https://rickandmortyapi.com/api/episode/31","https://rickandmortyapi.com/api/episode/32","https://rickandmortyapi.com/api/episode/33","https://rickandmortyapi.com/api/episode/34","https://rickandmortyapi.com/api/episode/35","https://rickandmortyapi.com/api/episode/36","https://rickandmortyapi.com/api/episode/37","https://rickandmortyapi.com/api/episode/38","https://rickandmortyapi.com/api/episode/39","https://rickandmortyapi.com/api/episode/40","https://rickandmortyapi.com/api/episode/41","https://rickandmortyapi.com/api/episode/42","https://rickandmortyapi.com/api/episode/43","https://rickandmortyapi.com/api/episode/44","https://rickandmortyapi.com/api/episode/45","https://rickandmortyapi.com/api/episode/46","https://rickandmortyapi.com/api/episode/47","https://rickandmortyapi.com/api/episode/48","https://rickandmortyapi.com/api/episode/49","https://rickandmortyapi.com/api/episode/50","https://rickandmortyapi.com/api/episode/51"],"url":"https://rickandmortyapi.com/api/character/1","created":"2017-11-04T18:48:46.250Z"},{"id":8,"name":"Adjudicator Rick","status":"Dead","species":"Human","type":"","gender":"Male","origin":{"name":"unknown","url":""},"location":{"name":"Citadel of Ricks","url":"https://rickandmortyapi.com/api/location/3"},"image":"https://rickandmortyapi.com/api/character/avatar/8.jpeg","episode":["https://rickandmortyapi.com/api/episode/28"],"url":"https://rickandmortyapi.com/api/character/8","created":"2017-11-04T20:03:34.737Z"},{"id":15,"name":"Alien Rick","status":"unknown","species":"Alien","type":"","gender":"Male","origin":{"name":"unknown","url":""},"location":{"name":"Citadel of Ricks","url":"https://rickandmortyapi.com/api/location/3"},"image":"https://rickandmortyapi.com/api/character/avatar/15.jpeg","episode":["https://rickandmortyapi.com/api/episode/10"],"url":"https://rickandmortyapi.com/api/character/15","created":"2017-11-04T20:56:13.215Z"},{"id":19,"name":"Antenna Rick","status":"unknown","species":"Human","type":"Human with antennae","gender":"Male","origin":{"name":"unknown","url":""},"location":{"name":"unknown","url":""},"image":"https://rickandmortyapi.com/api/character/avatar/19.jpeg","episode":["https://rickandmortyapi.com/api/episode/10"],"url":"https://rickandmortyapi.com/api/character/19","created":"2017-11-04T22:28:13.756Z"},{"id":22,"name":"Aqua Rick","status":"unknown","species":"Humanoid","type":"Fish-Person","gender":"Male","origin":{"name":"unknown","url":""},"location":{"name":"Citadel of Ricks","url":"https://rickandmortyapi.com/api/location/3"},"image":"https://rickandmortyapi.com/api/character/avatar/22.jpeg","episode":["https://rickandmortyapi.com/api/episode/10","https://rickandmortyapi.com/api/episode/22","https://rickandmortyapi.com/api/episode/28"],"url":"https://rickandmortyapi.com/api/character/22","created":"2017-11-04T22:41:07.171Z"},{"id":48,"name":"Black Rick","status":"Alive","species":"Human","type":"","gender":"Male","origin":{"name":"unknown","url":""},"location":{"name":"Citadel of Ricks","url":"https://rickandmortyapi.com/api/location/3"},"image":"https://rickandmortyapi.com/api/character/avatar/48.jpeg","episode":["https://rickandmortyapi.com/api/episode/22","https://rickandmortyapi.com/api/episode/28"],"url":"https://rickandmortyapi.com/api/character/48","created":"2017-11-05T11:15:26.044Z"},{"id":56,"name":"Bootleg Portal Chemist Rick","status":"Dead","species":"Human","type":"","gender":"Male","origin":{"name":"unknown","url":""},"location":{"name":"Citadel of Ricks","url":"https://rickandmortyapi.com/api/location/3"},"image":"https://rickandmortyapi.com/api/character/avatar/56.jpeg","episode":["https://rickandmortyapi.com/api/episode/28"],"url":"https://rickandmortyapi.com/api/character/56","created":"2017-11-05T11:34:16.447Z"},{"id":69,"name":"Commander Rick","status":"Dead","species":"Human","type":"","gender":"Male","origin":{"name":"unknown","url":""},"location":{"name":"Citadel of Ricks","url":"https://rickandmortyapi.com/api/location/3"},"image":"https://rickandmortyapi.com/api/character/avatar/69.jpeg","episode":["https://rickandmortyapi.com/api/episode/22"],"url":"https://rickandmortyapi.com/api/character/69","created":"2017-11-30T11:28:06.461Z"},{"id":72,"name":"Cool Rick","status":"Alive","species":"Human","type":"","gender":"Male","origin":{"name":"Earth (K-83)","url":"https://rickandmortyapi.com/api/location/26"},"location":{"name":"Citadel of Ricks","url":"https://rickandmortyapi.com/api/location/3"},"image":"https://rickandmortyapi.com/api/character/avatar/72.jpeg","episode":["https://rickandmortyapi.com/api/episode/28"],"url":"https://rickandmortyapi.com/api/character/72","created":"2017-11-30T11:41:11.542Z"},{"id":74,"name":"Cop Rick","status":"Alive","species":"Human","type":"","gender":"Male","origin":{"name":"unknown","url":""},"location":{"name":"Citadel of Ricks","url":"https://rickandmortyapi.com/api/location/3"},"image":"https://rickandmortyapi.com/api/character/avatar/74.jpeg","episode":["https://rickandmortyapi.com/api/episode/28"],"url":"https://rickandmortyapi.com/api/character/74","created":"2017-11-30T11:48:18.950Z"},{"id":78,"name":"Cowboy Rick","status":"Alive","species":"Human","type":"","gender":"Male","origin":{"name":"unknown","url":""},"location":{"name":"Citadel of Ricks","url":"https://rickandmortyapi.com/api/location/3"},"image":"https://rickandmortyapi.com/api/character/avatar/78.jpeg","episode":["https://rickandmortyapi.com/api/episode/10","https://rickandmortyapi.com/api/episode/28"],"url":"https://rickandmortyapi.com/api/character/78","created":"2017-11-30T14:15:18.347Z"},{"id":82,"name":"Cronenberg Rick","status":"unknown","species":"Cronenberg","type":"","gender":"Male","origin":{"name":"Cronenberg Earth","url":"https://rickandmortyapi.com/api/location/12"},"location":{"name":"Earth (C-137)","url":"https://rickandmortyapi.com/api/location/1"},"image":"https://rickandmortyapi.com/api/character/avatar/82.jpeg","episode":["https://rickandmortyapi.com/api/episode/6","https://rickandmortyapi.com/api/episode/10"],"url":"https://rickandmortyapi.com/api/character/82","created":"2017-11-30T14:28:54.596Z"},{"id":86,"name":"Cyclops Rick","status":"Dead","species":"Humanoid","type":"","gender":"Male","origin":{"name":"unknown","url":""},"location":{"name":"Citadel of Ricks","url":"https://rickandmortyapi.com/api/location/3"},"image":"https://rickandmortyapi.com/api/character/avatar/86.jpeg","episode":["https://rickandmortyapi.com/api/episode/10","https://rickandmortyapi.com/api/episode/22","https://rickandmortyapi.com/api/episode/28"],"url":"https://rickandmortyapi.com/api/character/86","created":"2017-11-30T20:53:10.382Z"},{"id":103,"name":"Doofus Rick","status":"unknown","species":"Human","type":"","gender":"Male","origin":{"name":"Earth (J19ζ7)","url":"https://rickandmortyapi.com/api/location/31"},"location":{"name":"Earth (Replacement Dimension)","url":"https://rickandmortyapi.com/api/location/20"},"image":"https://rickandmortyapi.com/api/character/avatar/103.jpeg","episode":["https://rickandmortyapi.com/api/episode/10","https://rickandmortyapi.com/api/episode/22"],"url":"https://rickandmortyapi.com/api/character/103","created":"2017-12-01T12:29:27.984Z"},{"id":119,"name":"Evil Rick","status":"Dead","species":"Humanoid","type":"Robot","gender":"Male","origin":{"name":"unknown","url":""},"location":{"name":"Citadel of Ricks","url":"https://rickandmortyapi.com/api/location/3"},"image":"https://rickandmortyapi.com/api/character/avatar/119.jpeg","episode":["https://rickandmortyapi.com/api/episode/10"],"url":"https://rickandmortyapi.com/api/character/119","created":"2017-12-26T16:17:16.472Z"},{"id":135,"name":"Garment District Rick","status":"Dead","species":"Human","type":"","gender":"Male","origin":{"name":"unknown","url":""},"location":{"name":"Citadel of Ricks","url":"https://rickandmortyapi.com/api/location/3"},"image":"https://rickandmortyapi.com/api/character/avatar/135.jpeg","episode":["https://rickandmortyapi.com/api/episode/28"],"url":"https://rickandmortyapi.com/api/character/135","created":"2017-12-26T20:51:43.614Z"},{"id":164,"name":"Insurance Rick","status":"unknown","species":"Human","type":"","gender":"Male","origin":{"name":"unknown","url":""},"location":{"name":"Citadel of Ricks","url":"https://rickandmortyapi.com/api/location/3"},"image":"https://rickandmortyapi.com/api/character/avatar/164.jpeg","episode":["https://rickandmortyapi.com/api/episode/10"],"url":"https://rickandmortyapi.com/api/character/164","created":"2017-12-29T17:03:08.645Z"},{"id":165,"name":"Investigator Rick","status":"Dead","species":"Human","type":"","gender":"Male","origin":{"name":"unknown","url":""},"location":{"name":"Citadel of Ricks","url":"https://rickandmortyapi.com/api/location/3"},"image":"https://rickandmortyapi.com/api/character/avatar/165.jpeg","episode":["https://rickandmortyapi.com/api/episode/28"],"url":"https://rickandmortyapi.com/api/character/165","created":"2017-12-29T17:05:15.514Z"},{"id":187,"name":"Juggling Rick","status":"unknown","species":"Human","type":"","gender":"Male","origin":{"name":"unknown","url":""},"location":{"name":"Citadel of Ricks","url":"https://rickandmortyapi.com/api/location/3"},"image":"https://rickandmortyapi.com/api/character/avatar/187.jpeg","episode":["https://rickandmortyapi.com/api/episode/28"],"url":"https://rickandmortyapi.com/api/character/187","created":"2017-12-29T18:59:47.440Z"},{"id":215,"name":"Maximums Rickimus","status":"Dead","species":"Human","type":"","gender":"Male","origin":{"name":"unknown","url":""},"location":{"name":"Rick's Memories","url":"https://rickandmortyapi.com/api/location/126"},"image":"https://rickandmortyapi.com/api/character/avatar/215.jpeg","episode":["https://rickandmortyapi.com/api/episode/10","https://rickandmortyapi.com/api/episode/22","https://rickandmortyapi.com/api/episode/51"],"url":"https://rickandmortyapi.com/api/character/215","created":"2017-12-30T14:27:55.489Z"}]}

【问题讨论】:

  • 不确定您的意思,但如果您想要数组中的第一项,请使用 data[0]
  • "我想选择某个索引来选择该对象" - 你的意思是像data[0]? “但我不能,我尝试了多种方法,但都不起作用” - 请展示您尝试过的方法以及它们如何不起作用,它们给出的输出以及您期望的输出。

标签: javascript json object promise


【解决方案1】:
response.json();

在大多数情况下返回一个对象数组,就像任何其他数组一样,您可以解构它以获取第一项

const [first] = data;

类似:

fetch("URL")
    .then((response) => {
      response.json().then((data) => {
      const [anyVar] = data.results; // first index of the array
      console.log(anyVar);
    })
   })

【讨论】:

  • 感谢您的回答,但不起作用,告诉我数据不可迭代的代码
  • console.log(JSON.stringify(data)),看看它的样子
  • 似乎是返回一个字符串格式的 JSON 对象,我怎样才能转换为 JSON 对象?
  • 您能否更新问题以显示响应的样子?
  • 我已经用输出编辑了原始帖子
猜你喜欢
  • 2019-07-25
  • 2021-03-23
  • 2011-03-18
  • 1970-01-01
  • 2018-03-23
  • 2019-11-26
  • 2020-02-07
  • 2023-03-20
相关资源
最近更新 更多