Jump to content
Gilberto Jr

Lendo dado JSON webservice

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Marcos PP
      Tenho que retornar os dados desta URL e transformar em variaves em PHP

      Ja tentei alguns exemplos mas so me retorna Null

      http://betontec.fortiddns.com:8082/api/login?usuario=joeliton&senha=123

       
      $data = file_get_contents('http://betontec.fortiddns.com:8082/api/login?usuario=joeliton&senha=123'); $data = json_decode($data,true); var_dump($data);  
    • By fernandoxwiggy
      Bom dia,
      Alguém já teve que desenvolver o CIOT da empresa E-frete em C#?
       
      Estou buscando exemplos de como fazer usando o web service deles (http://dev.efrete.com.br/Services/LogonService.asmx).
      Eu acredito que preciso chamar o "login" (depois o logout) dentro desse web service, mas ele é uma interface e não estou achando um exemplo de chamar um procedimento em um web service que seja um interface.
       
      Agradeço desde já se alguém puder ajudar.
    • By robertdccaetano
      Pessoal boa tarde, tenho uma dúvida em relação a um problema que estou enfrentando aqui no php ao codificar, podem me ajudar por favor?
       
      É o seguinte, precisava passar dois objetos para o json_encode(), e capturar o atributo "nome" deles num fragmento, porém o callBack passando pelo json_encode está levando só um objeto, observem o print por favor.
       
      Obs: Ja iterei pelo foreach, mas mesmo assim está passando só um objeto pelo encode 



    • By vmmh
      Alguma alma caridosa que me possa ajudar ?
      há dias que ando com este problema e não consigo resolver. Ficaria eternamente grato se alguém pudesse ajudar
       
      o codigo abaixo em localhost funciona na perfeição , mas em produção , no lado do servidor , nada... HTTP error 500.
      o pedido que estou a fazer está noutro dominio com porta 81 e no meu dominio uso certificado de segurança. Será por aí?
      de qualquer forma o wsdl está   aqui:
       
       
      $client = new SoapClient('https://dekrainspecoes.pt/acp/PROD_CustomUI_ACP_Member_Validation_WS.WSDL');
      $result = $client->QueryByNumCartao(array('N_Cartao' => "705684011673122085"));
      if (!empty($result->QueryByNumCartao_Output->Cartao_Ativo)) {
       
          echo 'The userId : '.$result->QueryByNumCartao_Output ->Pessoa_ID;
      }
       
      $JSON = json_encode($result);
    • By Guilherme Luiz
      Olá pessoal,
       
      Estou com uma pequena dúvida em relação a buscar dados em json no MySQL.
      No meu banco eu tenho uma table com o seguinte campo em json.
       
      table - contacts
      column - groups_id
       
      Na coluna groups_id eu armazeno ids de grupos em json por exemplo:
      ["252","222","666"]  
      Quando eu realizo a seguinte query
      SELECT * FROM user_contacts WHERE JSON_CONTAINS(group_id, '["252"]')  
      Beleza... Ele me resulta em todos os contatos que possuem o registro 252.
      O que acontece é que essa table é 1 > N, ou seja, um contato pode fazer parte de vários grupos, sendo assim:
       
      quando eu consulto
      SELECT * FROM user_contacts WHERE JSON_CONTAINS(group_id, '["252","222"]') Ele não me resulta nos contatos que estão com grupo 252 ou 222.
      Ele me resulta nos contatos que estão com o grupo 252 e 222, ou seja, ele me retorna somente os contatos que o group id tenha ["252","222"]
       
      Eu vi que nessa situação eu poderia criar um INDEX na minha tabela usando:
      ALTER TABLE user_contacts ADD INDEX groups ( (CAST(group_id->'$.groups' AS UNSIGNED ARRAY)) );  
      Mas o CAST() na versão que Mysqli que eu possuo no servidor 4.6.X me retorna Syntax error.
      Alguem teria uma sugestão ou luz de qual caminho posso seguir nessa situação sem que seja atualizando a versão do bd?
       
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.