How to show API results in HTML?

Asked

Viewed 67 times

-2

I’m with a project where I have an HTML input, where I send the link to an image of a car, goes to an AI that searches for an API. So far so good, the result comes back right on the console. The problem is that I wanted to know how to take the result of this JSON, to HTML. Follow the code below:

<!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

javascript html jquery json api
  • 1

    How do you want to display in HTML? Only pure JSON? What is the difficulty?

  • I get the JSON with the right results, only on the console, so I wanted to pass the result and display it in the HTML page, so that it is visible. Can you help me? I don’t have much knowledge in JSON, thanks in advance.

  • If you don’t know how to create an element in HTML with Javascript, take a look here: https://answall.com/q/120708/100416

  • Thanks bro, really. Voou try here, count on me too, I know little but I can help, vlw.

  • Just one more question friend, how do I insert my JSON here in Js? (I know nothing about JS)

  • An example: const pre = document.createElement('pre');pre.innerText = JSON.stringify(output, null, 4);document.body.append(pre);. I don’t recommend giving the append in the body, make it look better in your HTML, this is just an example (are three lines, break them after the ;). If you have difficulties, I suggest you create a simple example (read [mcve]) and click [Edit] to improve your question.

  • Thanks guy, but the console in the browser says that "Uncaught Referenceerror: output is not defined at (index):38"

  • Gustavodaniel the code that @Rafaeltavares suggested or has to be placed inside the then(’s Function, the method is asynchronous and not synchronous, outside the scope of the variable.

Show 3 more comments

1 answer

0


As already commented, you can:

  1. Create an HTML element <pre>, which will display your JSON without changing the formatting;

    const pre = document.createElement('pre');

  2. Transform the received JSON into an indented string and insert it as text into its element <pre>;

    pre.textContent = JSON.stringify(output, null, 4);

  3. Insert the widget into your HTML document after your <input type="submit">, for example.

    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>

  • Thanks friend! It worked great! If it’s not too much trouble (rsrs), could you help me with the JSON keys and brackets, and just return the names please? type os { "result": [ { "body_style": "Sedan"

  • What lack of love do you have in your heart to format JSON with 3 spaces, Bsdoukos? There is the team of those who format with 2, those who format with 4, but 3 is the first time I see hahaha.

  • 1

    @Gustavodaniel I’m not sure I understand your idea. Do you just want to remove the keys and brackets or do you want to manipulate JSON to display only the returned values in a more readable way? Anyway, it might be worth creating a new question clarifying your problem better.

  • @Rafaeltavares I even indent with 4 spaces, I don’t know why I put 3 there. I even edited the answer :)

  • @Bsdoukos, so man, I just wanted the return of JSON to be more readable

Browser other questions tagged javascript html jquery json api

You are not signed in. Login or sign up in order to post.