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