Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde.
Eu esto com um probleminha que eu não estou conseguindo resolver.
Estou lendo um json atraves de uma webservice https://jsonplaceholder.typicode.com/photos atraves do codigo abaixo.
<html>
<head>
<title>Teste</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<!-- Adicionando Javascript -->
<script type="text/javascript" >
$(document).ready(function(){
$("#search").click(function(){
$.ajax({
type: "GET",
dataType: "json",
url: "https://jsonplaceholder.typicode.com/photos",
success: function(data) {
for (var i in data) { //vai passar por todos os objetos dentro do array
$("#title").text(data[i]["title"]);
$("#id").text(data[i]["id"]);
$("#albumId").text(data[i]["albumId"]);
$("#thumbnailUrl").attr("src",data[i]["thumbnailUrl"]);
$("#url").attr("src",data[i]["url"]);
}
}
});
})}); // END Function, END ready
</script>
</head>
<body>
<input type="button" placeholder="Busca" id="search" value="Buscar">
<section>
<div class="container">
<div class="row" id="content">
<br/>
<div id="id"></div><br/>
<div id="albumId"></div><br/>
<div id="title"></div><br/>
<img src="" id="thumbnailUrl"><br/>
<img src="" id="url"><br/>
</div>
</div>
</section>
</body>
</html>
Eu estou até conseguindo trazer as informações. Porem vem o ultimo dado do JSON,
E eu também, tenho que mostrar todas as informações do arquivo JSON. Fazer um for para mostrar todos os dados na tela.
Mas eu não estou conseguindo, poderia me ajudar?
Att;
Gilberto Jr>
18 horas atrás, gabrielms disse:
@Gilberto Jr O problema é bem simples!
Quando você utiliza o loop(for) você acabo adicionando os valores nos mesmos elementos, assim o loop vai executando e todo vez ele vai substituído o ultimo valor adicionado, até sobrar o ultimo.
Para corrigir isso basta você, em vez de você adicionar os valores em um elemento já existente, você criar um elemento e adicionar o valor nele e depois você adiciona o elemento na página.
Exemplo:
<html>
<head>
<meta charset="UTF-8">
<title>Teste</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<!-- Adicionando Javascript -->
<script type="text/javascript" >
$(document).ready(function(){
$("#search").click(function(){
$.ajax({
type: "GET",
dataType: "json",
url: "https://jsonplaceholder.typicode.com/photos ",
success: function(data)
{
for (i = 0; i < 10; i++)
{ //vai passar por todos os objetos dentro do array
console.log(1);
$(".container").append(`
<div class="row"><br/>
<div>${data[i]["id"]}</div><br/>
<div>${data[i]["albumId"]}</div><br/>
<div>${data[i]["title"]}</div><br/>
<img src="${data[i]["thumbnailUrl"]}"><br/>
<img src="${data[i]["url"]}"><br/>
</div>
`);
}
}
});
});
}); // END Function, END ready
</script>
</head>
<body>
<input type="button" placeholder="Busca" id="search" value="Buscar">
<section>
<div class="container"></div>
</section>
</body>
</html>
OBS..: Eu modifiquei o for, porque a quantidade de elemento que ele carrega é muito grande, para evitar o lag eu coloquei um limite de 10.
@gabrielms Deu certinho.
Obrigado.
Att;
Gilberto Jr
@Gilberto Jr O problema é bem simples!
Quando você utiliza o loop(for) você acabo adicionando os valores nos mesmos elementos, assim o loop vai executando e todo vez ele vai substituído o ultimo valor adicionado, até sobrar o ultimo.
Para corrigir isso basta você, em vez de você adicionar os valores em um elemento já existente, você criar um elemento e adicionar o valor nele e depois você adiciona o elemento na página.
Exemplo: