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 Regiane Primoni
      Fiz toda integração da API 3.0 da Cielo utilizando o ambiente de teste deu tudo certo, quando coloquei url e credenciais de produção retorna erro 405.
      O certificado + os 3 arquivos cielo estão instalados.
       
      O código:
      <?php
      $array = array(
          "MerchantOrderId" => "2014111703",
          "Payment" => array(
              "Type"=> "CreditCard",   
              "Amount"=> "15700",   
              "Installments"=> "1",   
              "SoftDescriptor"=> "123456789ABCD",
              "CreditCard" => array(
                  "CardNumber" => "4551870000000183",   
                  "Holder" => "Teste Holder",   
                  "ExpirationDate" => "10/2030",   
                  "SecurityCode" => "123",
                  "Brand" => "Visa"
              ),
          ), 
      );
      echo $json = json_encode($array);                                                                           
      $ch = curl_init('https://api.cieloecommerce.cielo.com.br/'); 
      curl_setopt ($ch, CURLOPT_CUSTOMREQUEST, "POST");   
      curl_setopt($ch, CURLOPT_POSTFIELDS, $json); 
      curl_setopt ($ch, CURLOPT_RETURNTRANSFER, true);  
      curl_setopt($ch, CURLOPT_HTTPHEADER, array(
          'Content-Type: application/json',
          'MerchantId: ' . '8b08ea04-951e-414e-9541-d2d19c36fdf6',
          'MerchantKey: ' . 'QJCRZAUKNODFHXBISETYIJXSTMNTAKSDVEKCISGI',
          'Content-Length: ' . strlen($json))
      );                                                                                                        
      $result = curl_exec ($ch);
      $novo = json_decode($result);
      echo "TID ". $novo->Payment->Tid;
       
      O erro:
      {"MerchantOrderId":"2014111703","Payment":{"Type":"CreditCard","Amount":"15700","Installments":"1","SoftDescriptor":"123456789ABCD","CreditCard":{"CardNumber":"4551870000000183","Holder":"Teste Holder","ExpirationDate":"10\/2030","SecurityCode":"123","Brand":"Visa"}}}
      Server Error
      405 - HTTP verb used to access this page is not allowed.
      The page you are looking for cannot be displayed because an invalid method (HTTP verb) was used to attempt access.
       
      Alguem consegue me ajudar por favor
       
    • By evandrofelipe
      Como consigo ler este retorno e jogar para dentro de uma variável?
       
      ["total"]=> int(771) ["page"]=> int(1) ["total_pages"]=> int(78) } ...
      $data = curl_exec($ch);
      $info = json_decode($data, true);
      curl_close($ch);
       
      fiz assim, mas sem sucesso:
      echo '<p>';
      echo $info['buildings']['id'];
      echo '<p>';
       
      fiz assim também e também sem sucesso:
      foreach($info as $registro)
      {$i=$i+1;
      echo $registro->url[$i].'<p>';
      }
       
      agradeço a quem poder ajudar.
    • By luannsr12
      Olá pessoal, ontem coloquei um repositório em meu GitHub , para quem deseja rastrear encomendas dos correios usando php, a chamada é bem simples, e retorna em JSON:
       
      <?php $obj = "CODIGO DE RASTREIO"; $url = "http://localhost/rastreio/api/obj.php?obj={$obj}"; $rastreio = file_get_contents($url); echo $rastreio; JSON:
      { "0": { "date":"10/06/2019", "hour":"14:14", "location":"SAO PAULO / SP", "action":"Objeto encaminhado", "message":"Objeto encaminhado de Agência dos Correios em SAO PAULO / SP para Unidade de Tratamento em SAO PAULO / SP", "change":"há 2 dias" } } https://github.com/luannsr12/correios-rastreio
      Vlw!!
    • By Simioni
      Olá, estou com um dificuldade, estou bolando um calendário de reserva, eu tenho as datas fixas, por exemplo, 07/09/2019, 14/09/2019, 15/09/2019 e cada dia tem 30 vagas disponíveis, o que estou apanhado é em mostrar somente um vez no calendário.
      Eu tenho as tabelas:
      beneficios_calendario

       
      e a beneficios_reserva:

       
      Meu model:
       
      public function vagas_disponiveis() { $this->db->select('*'); $this->db->from('beneficios_calendario'); $query = $this->db->get(); $dias = $query->result_array(); $this->db->select('count(*) as cnt, data_reserva'); $this->db->from('beneficios_reserva'); $this->db->group_by('data_reserva'); $query = $this->db->get(); $reservas = $query->result_array(); $data = array(); foreach ($dias as $dia) { foreach ($reservas as $reserva) { if ($reserva['data_reserva'] == $dia['start']) { $vagas = $dia['title'] - $reserva['cnt']; $data[] = array( 'title' => $vagas, 'start' => $dia['start'], 'color' => $dia['color'], ); } } $data[] = array( 'title' => $dia['title'], 'start' => $dia['start'], 'color' => $dia['color'], ); } echo json_encode($data); }
       
       
      Obrigado.
    • By manolegal
      Bom dia
      Já fiz dezenas de pesquisas, porém não consigo resolver o problema.
      Tenho um modal onde edito dados da pessoa selecionada pelo usuário em um formulário. Esta pessoa é selecionada no formulário (através autocomplete jquery), não vindo de uma pesquisa do BD, por este motivo estou tendo dificuldade para selecionar os dados da pessoa pois preciso pegar os valores vindos por JSON e passá-los para o modal.
      Meu arquivo e retorno JSON:
      while ($linha = @pg_fetch_array($Resultado_lista)){ $id_contribuinte_bd = $linha["id_contribuinte"]; $contribuinte_bd = $linha["contribuinte"]; $endereco_bd = $linha["endereco"]; $telefone = $linha["telefone"]; $array_dados[] = array('label' => $contribuinte_bd. '' .$cnpj_ou_cpf_mostra. '' .$pessoa_ou_empresa_bd_mostra, 'value' => $linha['id_contribuinte'], 'p_ou_e' => $linha['pessoa_ou_empresa'], 'ender_p_e' => 'Endereço: '.$linha['endereco'].''.$telefone_formato); } // Fecha While echo json_encode($array_dados); // Retorno dados: 0 label AGORA DE TESTES2 value 2672 p_ou_e PESSOA ender_p_e Endereço: Testes 1 label AGORA NOVO value 2654 p_ou_e PESSOA ender_p_e Endereço: ihlgkjlfdjkfdkjfd 2 label AGORA OUTRO TESTE value 2673 p_ou_e PESSOA ender_p_e Endereço: Teste endereço ........, etc //Preview [{"label":"AGORA DE TESTES2","value":"2672","p_ou_e":"PESSOA","ender_p_e":"Endere\u00e7o: Testes"},{"label":"AGORA NOVO","value":"2654","p_ou_e":"PESSOA","ender_p_e":"Endere\u00e7o: ihlgkjlfdjkfdkjfd"},{"label.......,etc Função Jquery para autocomplete pessoa e postar dados em alguns campos do formulário principal:
      <script type="text/javascript"> $(document).ready(function(){ $('#pesq').autocomplete({ source: "ajx_pes_p_nom_ui.php?md=sv", minLength: 1, select: function (event, ui) { $("#pesq").val(ui.item.label); $("#solicitante").val(ui.item.value); $("#pe_hid").val(ui.item.p_ou_e); $("#endereco_hid").val(ui.item.ender_p_e); $("#obs_ped").val(ui.item.ender_p_e); //$("#modal_edit_pessoa_red.md_pes_nome").val(ui.item.ender_p_e); event.preventDefault(); } }); }); </script> No formulário principal estou conseguindo inserir os dados vindo por JSON normalmente. Quando trago dados para edição do BD, também consigo inserir os dados normalmente no modal. Nesta situação, como faço por exemplo, paga "pegar" uma destas variáveis e inseri-las em um campo de um formulário modal?
       
×

Important Information

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