How to use JSON [closed]

Navigation
0

I have a link from an API ( link )

I want to know if there's any way I can get it "name": "Norkx", "sex": "female", "vocation": "Royal Paladin", "level": 407, "world": "Inabra"

and print in HTML?

    
asked by anonymous 27.09.2018 / 21:03

1 answer

0

You can solve 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><tbodyid="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 the 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

}

In this way you get the data that you said from json

Explication of working with JSON

Thisisthereturnimageofarequestusingpostman

Ifthereturnvariableiscalleddata,forexample:

Datawillreturntheentireobject.ifyouwantonlycharactersusedata.charactersandifyouwantthenameusedata.characters.nameandsoon...

Ifit'sanarraythenyouneedtousedata.characters.name[indicedoarray]

thesamecodeusinganotherpublicAPIurl:

//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><tbodyid="tbodyMain"></tbody>
</table>


<button type='button' id='btncnes' >CARREGAR</button>
    
27.09.2018 / 21:20
SetState does not work inside component Order rendering problem in repeat loop view