-3

Consumo uma API que lista os dados de uma raça canina numa tabela. Ao clicar na raça sou direcionado a uma nova página recebendo a id e exibindo as informações do JSON.

Preciso exibir a imagem do cão da API. Não consegui acessar o jpg contido na img: url em https://api.thedogapi.com/v1/breeds

meu objetivo: exibir a imagem no lugar da tag "p" do último código

function fazGet(url){
    let request = new XMLHttpRequest()
    request.open("GET",url,false)
    request.send()
    return request.responseText
    }
    fetch('https://api.thedogapi.com/v1/breeds').then(response => {
    return response.json()
    })
    
    
    function criaLinha(usuario){
    linha = document.createElement('tr')
    tdNome = document.createElement('td')
    tdNome.setAttribute('innerText', `https://api.thedogapi.com/v1/breeds/${usuario.id}`)
    tdLife = document.createElement('td')
    
    tdMais = document.createElement('a')
    tdMais.setAttribute('href',`detalhes.html?id=${usuario.id}`)
    
    
    tdNome.innerHTML = usuario.name;
    tdLife.innerHTML = usuario.life_span;
    tdMais.innerHTML = 'Info';
    
    
    linha.appendChild(tdNome)
    linha.appendChild(tdLife)
    
    linha.appendChild(tdMais)
    
    
    return linha
    }
    
    
    let cont = 0;
    function main(){
    let data = fazGet(`https://api.thedogapi.com/v1/breeds?limit=25&page=${cont}&order=ASC`)
    let usuarios = JSON.parse(data)
    
    let tabela = document.getElementById('tabela')
    usuarios.forEach(element => {
        let linha = criaLinha(element)
        tabela.appendChild(linha)
    })
    cont++
    }
    
    main()
table, th, td, tr{
    border: 1px solid black ;
    align-items: center;
}

nav{
    margin: 15px 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
    <title>Document</title>
</head>
<body>


    <table id='tabela' >

    </table>

    <nav aria-label="Page navigation example">
        <ul class="pagination">

          <li class="page-item">
            <a class="page-link" href='#'  aria-label="Next" onclick="main()">
              <span aria-hidden="true">&raquo;</span>
              <span >Exibir mais</span>
            </a>
          </li>
        </ul>
      </nav>



<script src="main.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get('id');


function exec(){
    const data = fetch(`https://api.thedogapi.com/v1/breeds/${id}`)
    .then(e=>e.json())
    .then(param=>{
        const dados = param
        document.querySelector("#name").innerHTML = dados.name;
        document.querySelector("#weight").innerHTML = (`${dados.weight.metric} kg`);
        document.querySelector("#life_span").innerHTML = dados.life_span
        document.querySelector("#temperament").innerHTML = dados.temperament;
        document.querySelector("#origin").innerHTML = dados.origin;
        document.querySelector("#image").innerHTML = dados.reference_image_id;
        console.log(dados);
    })
 
}
exec()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
    <title>Document</title>
</head>
<body>
    <div>
        <p>Raça</p>
        <span id="name"></span>
        <p>Peso</p>
        <span id="weight"></span>
        <p>Tempo de Vida</p>
        <span id="life_span"></span>
        <p>Temperamento</p>
        <span id="temperament"></span>
        <p>Origem</p>
        <span id="origin"></span>
        <!-- imagem de referência -->
        <p id="image">
            
        </p>
        
    </div>


    <a  class="btn btn-outline-primary" href="index.html" role="button">Retornar para lista</a>

<script src="maindetalhes.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

1 Resposta 1

-2

Voce pode criar uma nova pagina que busque as informacoes pelo ID.

Ao chamar sua nova pagina, voce devera passar o id como parametro na URL, pegar esse parametro da URL e enviar para a API novamente, para que ela lhe retorne os valores apenas desse animal

Vamos ao exemplo:

Se voce tem uma pagina chamada index.html, pode criar outra chamada detalhes.html

Onde voce colocou o

tdNome.setAttribute('href',`https://api.thedogapi.com/v1/breeds/${usuario.id}`)

voce pode substituir por :

tdNome.setAttribute('href',`detalhes.html?id=${usuario.id}`)

dentro dessa nova pagina, voce pode pegar o valor do ID com o seguinte codigo:

const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get('id');

E então, pode chamar a API para pegar as informações utilizando esse id:

fetch(`https://api.thedogapi.com/v1/breeds/${id}`).then(response => {
  const data = response.json()

  // considerando que você tem um elemento com o id "name"
  document.querySelector("#name").innerHTML = data.name;

  // altera o restante dos campos que quiser mostrar...
})

Buscando a imagem do cão:

Para isso, você precisará requisitar novamente a API, para que ela lhe retorne a URL. Pelo que li na documentação da API, eles têm essa rota para buscar informações de imagens (inclusive a URL):

https://api.thedogapi.com/v1/images/{image_id}

O image_id é o reference_image_id retornado na primeira requisição. Então basta fazer uma nova requisição para buscar os dados da imagem, dessa forma:

function getImage(imageId) {
  fetch(`https://api.thedogapi.com/v1/images/${imageId}`).then(response => 
  {
    const data = response.json()

    // lembre que você tem que ter um elemento
    // <img src="" id="image"/> dentro do HTML
    document.querySelector("#image").src = data.url;
  })
}

Então você deve chamar esse método dentro do método exec No lugar do código

document.querySelector("#image").innerHTML = dados.reference_image_id

Você deve substituir por

getImage(dados.reference_image_id);
7
  • Vocês são demais! Única pendência é a imagem. Não consegui trazer da API, vou estar abrindo outra pergunta. Se puder dar uma olhada agradeço.
    – Fhellipe
    Commented 22/10/2021 às 2:08
  • @Fhellipe: Se esta resposta resolveu o seu problema e não restou nenhuma dúvida, marque-a como correta/aceita ao clicar no "✅" que está ao lado dela, o que também marca a sua pergunta como resolvida. Se ainda te resta alguma dúvida ou gostaria de maiores esclarecimentos, fique à vontade para comentar. Se a resposta o agradou tanto considere votar na resposta que é maneira correta de agradecer no Stack Overflow. Commented 22/10/2021 às 5:31
  • Allef Douglas, essa resposta não responde o problema do AP. Ele quer a foto do animal porém ele se recusa a ler a documentação da API que está usando, já tentei passar o link da documentação mostrando como usar ele ignorou e apenas replicou o que escrevi que é o que está na pergunta. Se realmente quer ajudar o usuário aqui está o link de como trabalhar com fotos com The DOG API Commented 22/10/2021 às 5:42
  • Eu já tinha marcado, mas por algum motivo não aprovou. Quanto a eu ler a documentação, eu li mas não entendi mesmo. Tanto que meti um document.querySelector("#image").innerHTML = dados.reference_image_id; e agora vi que não é a jpg. Sou iniciante mesmo e a minha falta de conhecimento pode ter passado má impressão.
    – Fhellipe
    Commented 23/10/2021 às 1:22
  • 1
    Atualizei a resposta com a busca da imagem. Espero ter ajudado Commented 23/10/2021 às 3:20

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 .