How to use JSON

Question

I have a link to an API (https://api.tibiadata.com/v2/characters/Norkx.json)

I was wondering if there’s any way I could get "name":"Norkx", "Sex": "Fri", "Vocation": "Royal Paladin", "level":407, "world":"Inabra"

and print in HTML?

Answer 1

You can resolve this problem using ajax requests, and use the jQuery javascript library.

I’ll illustrate how to mount a table with this api that you showed:

//este é um exemplo de ajax sendo chamado ao clickar em um botao qualquer do seu html.

//ele pega o id do botao, e no click desse botao ele começa a função ajax
$('#btncnes').click(function(){ 
  $.ajax({ 
    //aqui a url do seu servelet, no caso eu "usei um servelet publico"
    url: 'https://api.tibiadata.com/v2/characters/Norkx.json', 
    //o tipo do metodo GET,POST, PUT, DELETE
    type: 'GET', 
    dataType: 'jsonp',
    //caso de certo o que fazer:
    success: function(data) { 
      console.log('retorno do server');
        console.log(data);
        var tr = 
        "<tr>"+
         "<td>"+data.characters.data.name+"</td>"+
         "<td>"+data.characters.data.sex+"</td>"+
         "<td>"+data.characters.data.vocation+"</td>"+
         "<td>"+data.characters.data.level+"</td>"+
         "<td>"+data.characters.data.word+"</td>"+
        "</tr>";
        
        //id do tbody da tabela
        $("#tbodyMain").append(tr);
      
    } 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
  <th>name</th>
  <th>sex</th>
  <th>vocation</th>
  <th>level</th>
  <th>word</th>
  </tr>
  <tbody id="tbodyMain"></tbody>
</table>


<button type='button' id='btncnes' >CARREGAR</button>

the EXAMPLE does not work for this api because it is blocking access, but this is how you get the return of data from this api:

success: function(data) { 
  console.log('retorno do server');
    //todos
    console.log(data);
    //somente o nome data.characters.data.name
    //somente o sex data.characters.data.sex
    //somente o vocation data.characters.data.vocation
    //somente o level data.characters.data.level
    //somente o word data.characters.data.word

} 

This way you get the data Voce spoke of json

How to work with JSON

This is the return image of a request using Postman

if the return variable is called data for example:

data will return the whole object. if you want only characters use data.characters and if you want the name use data.characters.name and so on...

if it is an array there you need to use data.characters.name[indice do array]

the same code using another url of a public API:

//este é um exemplo de ajax sendo chamado ao clickar em um botao qualquer do seu html.

//ele pega o id do botao, e no click desse botao ele começa a função ajax
$('#btncnes').click(function(){ 
  $.ajax({ 
    //aqui a url do seu servelet, no caso eu "usei um servelet publico"
    url: 'http://www.json-generator.com/api/json/get/cdYItaXpvm?indent=2', 
    //o tipo do metodo GET,POST, PUT, DELETE
    type: 'GET', 
    dataType: 'jsonp',
    //caso de certo o que fazer:
    success: function(data) { 
      console.log('retorno do server');
        
 
        var tr = 
        "<tr>"+
         "<td>"+data[0].email+"</td>"+
         "<td>"+data[0].picture+"</td>"+
         "<td>"+data[0].phone+"</td>"+
         "<td>"+data[0].address+"</td>"+
         "<td>"+data[0].company+"</td>"+
        "</tr>";
        
        //id do tbody da tabela
        $("#tbodyMain").append(tr);
      
    } 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
  <th>email</th>
  <th>picture</th>
  <th>phone</th>
  <th>address</th>
  <th>company</th>
  </tr>
  <tbody id="tbodyMain"></tbody>
</table>


<button type='button' id='btncnes' >CARREGAR</button>