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 clovis.sardinha
      Estou em um impasse pois sei pouco de javascript. Estou fazendo um autocomplete com CI4 e Javascript.
      Consigo gerar, através do controllers/model do CI4 um arquivo em json, mas não consigo retorná-lo para o javascript para poder mostrar as opções para consulta. 
      O console.log mostra que estou obtendo o  json() { [native code] }.
      Segue os dois arquivos para ver se alguém me ajuda.
      //arquivo cidade.js async function carregar_cidade(valor) { if (valor.length >= 3) { //console.log("Pesquisar:" + valor); const dados = fetch('Testes/?cidade='+valor, { method: "get", headers: { "Content-Type": "application/json", "X-Requested-With": "XMLHttpRequest" } }); const resposta = (await dados).json; console.log(resposta); var html = "<ul class='list-group position-fixed'>"; html += "<li class='list-group-item'>" + resposta['cid_nome'] + "</li>"; html += "</ul>"; } } <?php //arquivo Testes.php namespace App\Controllers; use App\Models\CidadeModel; /** NÃO MANDAR PARA O SERVIDOR - APENAS TESTES DE FUNÇÕES E OUTROS ELEMENTOS DO CI4 */ class Testes extends BaseController{ protected $tbCidades; public function __construct(){ $this->tbCidades = new CidadeModel(); } public function index(){ $request = \Config\Services::request(); $client = \Config\Services::curlrequest(); $cidades=[]; if($get=$request->getGet()){ $cities=$get['cidade']; $cidadeFiltrada=$this->tbCidades->getCidByName($cities); $cidades= json_encode($cidadeFiltrada); //dd($cidades); } echo view('Testes/testes'); } public function salvar(){ $request = \Config\Services::request(); if($post=$request->getPost()){ dd($post); } } } <!doctype html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title>Autocomplete</title> </head> <body> <div class="container"> <h1 class="mt-4 mb-4">Formulário</h1> <form class="row g-3"> <div class="col-12"> <label for="cidade" class="form-label">Cidade</label> <input type="text" name="cidade" class="form-control" id="cidade" placeholder="Pesquisar cidade" onkeyup="carregar_cidade(this.value)"> </div> <span ></span> </form> </div> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <script src="assets/js/cidade.js"></script> </body> </html>
    • By FabianoSouza
      Olá pessoal.
      Eu já utilizo o FOR JSON PATH para retornar o o resultado de uma consulta com JSON. Isso eu já sei fazer.
       
      O que preciso é criar uma função que receba um SELECT como parâmetro e retorne o resultado desse SELECT já formatado como JSON.
      Estou tentando isso, mas sem sucesso.
       
      A function dbo.fn_retornaJsonPath :
      (@String NVARCHAR(MAX)) RETURNS NVARCHAR(MAX) AS BEGIN BEGIN IF @String <> NULL SET @String = (SELECT @String AS jsonPath FOR JSON PATH) END BEGIN IF @String IS NULL SET @String = '[]' END RETURN @String END Forma de executar:
      SET @sql = 'SELECT ' SET @sql = @sql + ' dbo.fn_retornaJsonPath ((SELECT TT.tema FROM dbo.tabela AS TT WHERE TT.cd = CTT.id)) AS ''temas'' ' SET @sql = @sql + ' FROM dbo.minhaTab AS CTT ' EXEC(@sql) Mas não está rolando....
    • By PresleyMenezes
      Olá pessoal, gostaria de saber como copiar o conteúdo de um campo json com muitos pais e filhos e colar em outro campo de pais e filhos do mesmo arquivo json?
       
      agradeço a ajuda de vocês.
      em anexo o arquivo json e o codigo que estou tentando fazer

       

       

       
       
       
       

       

       
    • By Giovanird
      Olá a todos!
      Tenho uma api  Sala de Aula e dentro dela o id de cada aluno. Em outra api, API ALUNO,  tenho os dados de cada aluno:  nome, foto, endereço.
      Estou fazendo o foreach da api Sala de Aula e preciso também retornar os dados de cada aluno.
      Segue o código que não estou conseguindo desenvolver
      $sala = file_get_contents("https://api/sala?id=987"); $sala = json_decode($sala, true); $sala = $sala['data']; foreach ($sala as $resulsala){ $codigoaluno = $resulsala['idaluno']; $alunos = file_get_contents("https://api/alunos?id=$codigoaluno"); $alunos = json_decode($alunos, true); $alunos = $alunos['data']; foreach ($alunos as $resulalunos){ echo $resulalunos['nome']; echo $resulalunos['foto']; echo $resulalunos['rua']; } }  
    • By kania
      Tenho a seguinte situação.
      Recebo vários JSONs podendo ou não ser multidimensional, preciso atualizar uma determinada chave deste JSON, o problema é que algumas chaves podem ser duplicadas, bem como seus respectivos valores. Como estou tentando criar uma função genérica para navegar em qualquer JSON e modificar a chave em si, com estas duplicidades de chaves, estou tendo dificuldades em dizer ao código qual é chave que devo alterar.
       
      Arquivo JSON Exemplo
       
      {       "CREDITOR": {         "TAX": {           "TAC": 0.7         },         "ENABLE": "true",         "PRODUCTION": {           "email": "email@dominio.com",           "senha": "12457895",           "BASE_URL": "https://domino.com"         },         "HOMOLOGATION": {           "email": "email@dominio.com",           "senha": "12457895",           "BASE_URL": "https://domino.com"         },         "TARGET_VALUES": 5000000       }     }  
      Converto o JSON para array
       
      $json = json_decode($json_string, true);
      Função que criei até aqui
       
         
      /**      * Encontra a chave correspondente dentro do JSON      *      * @param array $jsonArray - JSON a ser verificado      * @param string $keyFather - chave de entrada      * @param string $keyUpdate - chave que modificar      * @param string $valueUpdate - novo valor da chave      * @return string      *      */     public static function searchKeyJson(array $jsonArray, string $keyFather, string $keyUpdate = null, $valueUpdate = null)     {         foreach ($jsonArray as $key => $value) {             if ($key == $keyFather && $keyUpdate == null) {                 $jsonArray[$key] =  $valueUpdate;                 return $jsonArray;             }             if ($key == $keyFather && $keyUpdate != null) {                 $jsonArray[$keyFather][$keyUpdate] = $valueUpdate;                 return $jsonArray;             }             if (is_array($value)) {                 if (($result = self::searchKeyJson($value, $keyFather, $keyUpdate, $valueUpdate)) !== false) {                     if ($keyUpdate == null) {                         return $result;                     } else {                         return $result;                     }                 }             }         }         return false;     }
      Até modifico o valor, mais no final para salvar, ele não monta o JSON como original, ele caba ignorando a chave inicial no JSON de exmeplo "CREDITOR": {}
       
      Retorno da função (notem que esta forma do padrão da original)
       
      => [          "TAX" => [            "TAC" => 0.7,          ],          "ENABLE" => "true",          "PRODUCTION" => [            "email" => "teste",            "senha" => "12457895",            "BASE_URL" => "https://domino.com",          ],          "HOMOLOGATION" => [            "email" => "email@dominio.com",            "senha" => "12457895",            "BASE_URL" => "https://domino.com",          ],          "TARGET_VALUES" => 5000000,        ]  
      Se eu percorrer o array e tentar modificar a chave em questão, ele muda todas as as chaves que tiverem no JSON porque tem duplicidade.
      Como posso resolver isto com uma função global que sirva para qualquer padrão de JSON que eu tiver?
×

Important Information

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