Solucionado
Boa tarde, como eu faço para que o json fiquei dentro de uma div?
class Teste {
static testeComAjax(){
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://reqres.in/api/users/2');
xhr.onreadystatechange = () => {
if(xhr.readyState == 4){
if(xhr.status == 200){
console.log(JSON.parse(xhr.responseText))
}
}
}
xhr.send();
}
}
Aqui tem um exemplo:
<html>
<body>
<div id="conteudo">
<script type="text/javascript">
class Teste {
static testeComAjax(){
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://reqres.in/api/users/2');
xhr.onreadystatechange = () => {
if(xhr.readyState == 4){
if(xhr.status == 200){
var resultado = JSON.parse(xhr.responseText).data;
console.log(resultado);
var conteudo_div = "";
conteudo_div += 'id:' + resultado.id + '<br>';
conteudo_div += 'email:' + resultado.email + '<br>';
conteudo_div += 'first_name:' + resultado.first_name + '<br>';
conteudo_div += 'last_name:' + resultado.last_name + '<br>';
conteudo_div += '<img src = ' + resultado.avatar + '>'
document.getElementById("conteudo").innerHTML = conteudo_div;
}
}
}
xhr.send();
}
}
Teste.testeComAjax();
</script>
</body>
</html>o que seria aquela data no final do resultado?
var resultado = JSON.parse(xhr.responseText).data;```Se você fizer isso:
var resultado = JSON.parse(xhr.responseText);
console.log(resultado);O resultado em seu console vai ser:
data: {id: 2, email: "janet.weaver@reqres.in", first_name: "Janet", last_name: "Weaver", avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"}No retorno da API, todos os dados ficam dentro do campo "data"
Ou seja, para acessar o nome, teria que fazer:
console.log(resultado.data.name);Por isso que eu criei a variável resultado já com o conteúdo de data, para facilitar a utilização
muito obrigado