Lendo dado JSON webservice

Gilberto Jr · Agosto 13, 2019

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

gabrielms · Agosto 13, 2019

@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.

Gilberto Jr · Agosto 14, 2019

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

Entrar

Arquivado

Lendo dado JSON webservice

Recommended Posts

Gilberto Jr 26

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrielms 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gilberto Jr 26

Compartilhar este post

Link para o post

Compartilhar em outros sites

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Javascript - Calcular Valores Monetário em Tempo Real

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante