0

Eu tenho um link de uma API (https://api.tibiadata.com/v2/characters/Norkx.json)

queria saber se tem como eu pegar "name":"Norkx", "sex":"female", "vocation":"Royal Paladin", "level":407, "world":"Inabra"

e imprimir em HTML?

1

1 Resposta 1

0

Você pode resolver este problema utilizando requisições ajax, e utilizar a biblioteca javascript jQuery.

Vou exemplificar como montar uma tabela com essa api que você mostrou:

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

o EXEMPLO não funciona para esta api pois ela esta bloqueando o acesso, mas é assim que você pega o retorno dos dados dessa 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

} 

Desta maneira você pega os dados que voce falou do json

Exmplicação de como trabalhar com JSON

inserir a descrição da imagem aqui

Essa é a imagem do retorno de uma requisição utilizando postman

se a variável de retorno se chama dados por exemplo:

dados irá retornar todo o objecto. se quiser somente characters use data.characters e se quiser o nome use data.characters.name e por ai vai...

se for um array ai você precisa usar data.characters.name[indice do array]

o mesmo código utilizando outra url de uma API publica:

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

5
  • entao nem tem como eu utilizar essa api ?
    – Rafael
    Commented 27/09/2018 às 19:29
  • Rafael, se você estiver dentro do dominio 'tibiadata' sim, caso ao contrario não, pois o cors não está habilitado Commented 27/09/2018 às 19:31
  • Pensei que era uma api publica e eu conseguiria retirar alguma informação dela.
    – Rafael
    Commented 27/09/2018 às 19:36
  • pior que não cara, fiz uma edição usando o mesmo código só que pra uma api publica Commented 27/09/2018 às 19:41
  • A API é pública sim, o problema aqui é CORS. É mais ou menos assim: você tem um cliente (seu navegador) que está acessando um site (stackoverflow) e faz uma requisição para um segundo servidor (API do Tibia). Para que isso funcione é necessário que o servidor do Tibia permita isso através do CORS. Commented 27/09/2018 às 20:00

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