-2

Estou com um projeto onde tenho um input HTML, onde envio o link da imagem de um carro, vai para uma IA que busca em uma API. Até aí tudo certo, o resultado volta certinho no console. O problema é que eu queria saber como faço para levar o resultado desse JSON, para o HTML. Segue o código abaixo:

<!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">
    <title>Document</title>
</head>
<body>
    <div id="data"></div>
    <input type="text" name="link" id="link">
    <input type="submit" name="button" onclick="clicouBotao()">
    <script src="https://algorithmia.com/v1/clients/js/algorithmia-0.2.1.js" type="text/javascript"></script>
    <script>
        function clicouBotao(){
         var input = document.getElementById('link').value;
        Algorithmia.client("simwTGCAoebHnAZc7rgS6NkkxxV1")
            .algo("LgoBE/CarMakeandModelRecognition/0.4.8?timeout=700") 
            .pipe(input)
            .then(function(output) {
            console.log(output);               
            });
        }              
    </script>
</body>
</html

8
  • 1
    Como você quer exibir no HTML? Só o JSON puro mesmo? Qual está sendo a dificuldade? Commented 27/08/2021 às 15:19
  • Eu recebo o JSON com os resultados certinho, só que no console, então eu queria passar o resultado e exibi-lo no HTML da página, pra que fique visível. Consegue me ajudar? Não tenho muito conhecimento em JSON, obrigado desde já. Commented 27/08/2021 às 15:22
  • Se não sabe criar um elemento no HTML com JavaScript, dê uma olhada aqui: pt.stackoverflow.com/q/120708/100416 Commented 27/08/2021 às 15:25
  • Obrigado mano, de verdade. Voou tentar aqui, conte comigo também, sei pouco mas posso ajudar, vlw. Commented 27/08/2021 às 15:28
  • Só mais uma pergunta amigo, como eu insiro o meu JSON aqui no Js? (Não sei nada de JS) Commented 27/08/2021 às 15:29

1 Resposta 1

-1

Como já comentado, você pode:

  1. Criar um elemento HTML <pre>, que exibirá seu JSON sem alterar a formatação;

    const pre = document.createElement('pre');
    
  2. Transformar o JSON recebido em uma string com indentação e inseri-la como texto em seu elemento <pre>;

    pre.textContent = JSON.stringify(output, null, 4);
    
  3. Inserir o elemento no seu documento HTML, após o seu <input type="submit">, por exemplo.

    const input = document.querySelector('input[type="submit"]');
    input.parentNode.insertBefore(pre, input.nextSibling);
    

<!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">
  <title>Document</title>
</head>

<body>
  <div id="data"></div>
  <input type="text" name="link" id="link">
  <input type="submit" name="button" onclick="clicouBotao()">
  <script src="https://algorithmia.com/v1/clients/js/algorithmia-0.2.1.js" type="text/javascript"></script>
  <script>
    function clicouBotao() {
      var input = document.getElementById('link').value;
      Algorithmia.client("simwTGCAoebHnAZc7rgS6NkkxxV1")
        .algo("LgoBE/CarMakeandModelRecognition/0.4.8?timeout=700")
        .pipe(input)
        .then(function(output) {
          const pre = document.createElement('pre');
          pre.textContent = JSON.stringify(output, null, 4);
          const input = document.querySelector('input[type="submit"]');
          input.parentNode.insertBefore(pre, input.nextSibling);
        });
    }
  </script>
</body>

</html>

5
  • Valeu amigo! Deu super certo! Se não for muito incômodo (rsrs), poderia me ajudar as chaves e os colchetes do JSON, e voltar apenas os nomes por favor? tipo os { "result": [ { "body_style": "Sedan" Commented 27/08/2021 às 18:18
  • Que falta de amor você têm no coração para formatar o JSON com 3 espaços, BSdoukos? Há o time dos que formatam com 2, os que formatam com 4, mas 3 é a primeira vez que vejo hahaha. Commented 27/08/2021 às 18:42
  • 1
    @GustavoDaniel Não sei se entendi bem a sua ideia. Você só quer remover as chaves e colchetes ou quer manipular o JSON para exibir apenas os valores retornados, de maneira mais legível? De qualquer forma, talvez valha a pena criar uma nova pergunta clarificando melhor seu problema.
    – user254120
    Commented 27/08/2021 às 19:48
  • @RafaelTavares Eu mesmo sempre indento com 4 espaços, nem sei por que coloquei 3 ali. Até editei a resposta :)
    – user254120
    Commented 27/08/2021 às 19:50
  • @BSdoukos, então cara, eu só queria que o retorno do JSON ficasse mais legível Commented 27/08/2021 às 21:11

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 .