2

estou consumindo uma API e exibindo dados com React. A API retorna o seguinte Json:

{
    "1": {
        "id": 1,
        "nome": "Outros",
        "abreviacao": "OUT",
        "escudos": {
            "60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
            "45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
            "30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
        },
        "nome_fantasia": "Outros"
    },
    "1349": {
        "id": 1349,
        "nome": "Ipatinga",
        "abreviacao": "IPA",
        "escudos": {
            "60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
            "45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
            "30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
        },
        "nome_fantasia": "Ipatinga"
    },
    "1371": {
        "id": 1371,
        "nome": "Cuiabá",
        "abreviacao": "CUI",
        "escudos": {
            "60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
            "45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
            "30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
        },
        "nome_fantasia": "Cuiabá"
    },
    "1390": {
        "id": 1390,
        "nome": "Icasa",
        "abreviacao": "ICA",
        "escudos": {
            "60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
            "45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
            "30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
        },
        "nome_fantasia": "Icasa"
    },
    "2190": {
        "id": 2190,
        "nome": "Oeste",
        "abreviacao": "OES",
        "escudos": {
            "60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
            "45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
            "30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
        },
        "nome_fantasia": "Oeste"
    },
    "2193": {
        "id": 2193,
        "nome": "Duque de Caxias",
        "abreviacao": "DUQ",
        "escudos": {
            "60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
            "45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
            "30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
        },
        "nome_fantasia": "Duque de Caxias"
    },
    "2197": {
        "id": 2197,
        "nome": "Americana",
        "abreviacao": "AME",
        "escudos": {
            "60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
            "45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
            "30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
        },
        "nome_fantasia": "Americana"
    },
    "2554": {
        "id": 2554,
        "nome": "Grêmio Prudente",
        "abreviacao": "PRU",
        "escudos": {
            "60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
            "45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
            "30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
        },
        "nome_fantasia": "Grêmio Prudente"
    },
    "2565": {
        "id": 2565,
        "nome": "Luverdense",
        "abreviacao": "LUV",
        "escudos": {
            "60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
            "45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
            "30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
        },
        "nome_fantasia": "Luverdense"
    }

}

Gostaria de exibir estes dados em uma tabela, mas ao tentar percorrer com map, tenho um erro:

TypeError: times.map is not a function

Segue o script em JS:

class App extends Component{

  state = {
    times: [],
  }

  async componentDidMount(){
    const response = await api.get('')
    this.setState({times: response.data})
    console.log(response.data)
  }
  render(){
    const {times} = this.state
    return(
      <div>
        {times.map(time =>(
          <li key={time.id}>
            {time.id}
          </li>
        ))}
      </div>
    )
  }
}

2 Respostas 2

1

O que você está recebendo da sua API não é um array, é um objeto que está indexando os times pelos seus ids.

Como map é um método de objetos do tipo array, não tem como invoca-lo no objeto que você recebeu como resposta da sua API.

Para tratar isso, você pode converter o objeto num array, ou mantê-lo como objeto e iterar sobre suas propriedades.

Exemplo de como tratar esse caso convertendo o objeto num array:

async componentDidMount(){
  const response = await api.get('')
  this.setState({ times: Object.values(response.data) })
}
1
  • Muito obrigado. Funcionou. Commented 26/07/2020 às 19:39
0

O seu JSON é um objeto onde cada chave desse objeto também representa outro objeto, bem diferente do que interar sobre um array de objetos que com o map é fácil, mas, como resolver esse problema, primeiro deve identificar cada chave desse objeto com Object.keys() retornando somente as chaves, e depois disso é fácil percorrer cada item desse objeto e resgatar seus valores, exemplo:

function App() {
  const data = {
    "1": {
        "id": 1,
        "nome": "Outros",
        "abreviacao": "OUT",
        "escudos": {
            "60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
            "45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
            "30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
        },
        "nome_fantasia": "Outros"
    },
    "1349": {
        "id": 1349,
        "nome": "Ipatinga",
        "abreviacao": "IPA",
        "escudos": {
            "60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
            "45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
            "30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
        },
        "nome_fantasia": "Ipatinga"
    },
    "1371": {
        "id": 1371,
        "nome": "Cuiabá",
        "abreviacao": "CUI",
        "escudos": {
            "60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
            "45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
            "30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
        },
        "nome_fantasia": "Cuiabá"
    },
    "1390": {
        "id": 1390,
        "nome": "Icasa",
        "abreviacao": "ICA",
        "escudos": {
            "60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
            "45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
            "30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
        },
        "nome_fantasia": "Icasa"
    },
    "2190": {
        "id": 2190,
        "nome": "Oeste",
        "abreviacao": "OES",
        "escudos": {
            "60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
            "45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
            "30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
        },
        "nome_fantasia": "Oeste"
    },
    "2193": {
        "id": 2193,
        "nome": "Duque de Caxias",
        "abreviacao": "DUQ",
        "escudos": {
            "60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
            "45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
            "30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
        },
        "nome_fantasia": "Duque de Caxias"
    },
    "2197": {
        "id": 2197,
        "nome": "Americana",
        "abreviacao": "AME",
        "escudos": {
            "60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
            "45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
            "30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
        },
        "nome_fantasia": "Americana"
    },
    "2554": {
        "id": 2554,
        "nome": "Grêmio Prudente",
        "abreviacao": "PRU",
        "escudos": {
            "60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
            "45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
            "30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
        },
        "nome_fantasia": "Grêmio Prudente"
    },
    "2565": {
        "id": 2565,
        "nome": "Luverdense",
        "abreviacao": "LUV",
        "escudos": {
            "60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
            "45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
            "30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
        },
        "nome_fantasia": "Luverdense"
    }

  };
  function loadObjectItems() {  
    return (
      <div>
        {Object.keys(data).map(time => (
          <li key={data[time].id} style={{listStyleType:'none'}}>
            <img src={data[time].escudos['30x30']} border="0" />
            {data[time].id} - {data[time].nome}
          </li>
        ))}
      </div>
    )
  }
  return (
    <div>{loadObjectItems()}</div>
  )
}
ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

o código principal para tirar a sua duvida é:

<div>
    {Object.keys(data).map(time => (
      <li key={data[time].id}>
        {data[time].id} - {data[time].nome}
      </li>
    ))}
 </div>

onde o Object.keys() traz as chaves dos outros objetos e com essa informação pode ser mapeado e resgatar cada objeto com suas informações e finalizando mostrar a informações como no exemplo completo.

A resposta do @user140828 é uma reposta direta e mostra com isso que não precisa mudar nada no seu código, só a forma de colocar o estado de um array, mas, quis trazer essa solução para que entenda realmente o que acontece e também outra forma de resolver.

4
  • 1
    Ótimo, me ajudou muito a entender, obrigado Virgilio. Commented 26/07/2020 às 19:54
  • os votos negativos começaram de novo assombrar o stackoverflow, fora os outros problemas já citados ..,
    – novic
    Commented 26/07/2020 às 22:26
  • Virgilio, tem outro endpoint nessa mesma API que retorna o objeto, como faria neste caso? { "atletas": [], "esquema_id": 0, "rodada_atual": 1, "patrimonio": 0, "valor_time": 0, "capitao_id": null, "pontos": null, "pontos_campeonato": null, "time": { "assinante": false, "cadastro_completo": true, "simplificado": false, "clube_id": 264, "esquema_id": 1, "tipo_adorno": 2, "tipo_camisa": 1, "tipo_escudo": 1, "temporada_inicial": 2016 } } Commented 27/07/2020 às 1:53
  • Então, você pode fazer a mesma coisa que foi passado na resposta que você aceitou, pelo visto ela foi mais fácil para você entender o problema inicial da sua pergunta além do mais quando você tem outra duvida deve ser gerado outra pergunta, faz isso gera uma outra pergunta @AdrianoValentim pra que tenha mais pessoas para responder, a lógica é a mesma, e você ai no comentário não postou qual é a sua duvida!
    – novic
    Commented 27/07/2020 às 2:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .