Jump to content
Cesar Melo

Retorno de função com JSON

Recommended Posts

Olá, gostaria de uma ajuda para retornar um resultado de uma função. Dentro dessa função, eu faço uma requisição através do $.getJSON(), e gostaria que função retornasse o resultado que obtido na requisição JSON.

Ex:

function pedidoGet() {
	var pedido;
	$.getJSON(
		"getters.php",
		{param1: "pedidoId"},
		function (data) {
			pedido= data[0];
			console.log(pedido) 
			//aqui, ainda dentro da requisição, a variavel "pedido" tem o valores que foi 
			//retornado pela requisição getJSON
		}
	);
	console.log(pedido) //aqui, não retorna nada
	return pedido; //aqui, essa variavel pedido não tem mais os valores que a requisição getJSON retornou.
}

var pedidoTeste= pedidoGet();
//depois que chamar a funçõa, gostaria de ter os valores para usar como for melhor pra mim.
console.log(pedidoTeste.id); 
console.log(pedidoTeste.valor);

Conseguiram entender minha necessidade?

 

Desde já, agradeço!

Share this post


Link to post
Share on other sites

Opa Angelo. Sim, o PHP devolve sim o que peço pelo GET, tanto que dentro da chamada getJSON, quando eu escrevo lá "console.log(pedido)", ele mostra o resultado que eu quero.

Porem, isso só funciona dentro da "function" que está dentro do getJSON.

Eu gostaria de ter essas informações fora dessa função, para que eu possa colocar os valores que eu preciso em div's separadas sem ter que ficar chamado a função getJSON toda hora.

Minha intensão é chamar a função apenas uma vez, e ter um "array" ou um "objeto" com os valores de resposta da requisição.

Share this post


Link to post
Share on other sites
Em 18/09/2018 at 08:36, angelorubin disse:

Exemplos com fetch, axios e $.getJSON aqui.

 

Uma opção melhor ainda com uma ótima abstração baseada no fetch - Ky

 

Outra alternativa seria você colocar uma variável fora do escopo da função.

 

Angelo, pesquisei um pouco e consegui chegar ao resultado que eu queria.

Eu encontrei um exemplo que achei que resolveria, mas não funcionou no meu caso.. mas tenho que fazer outros teste..

Veja só:

var pedido=null;
$.getJSON(
   "getters.php",
   {param1: "pedidoId"},
   function(data){
      pedido= data;
   }
);

//porem isso não funcionou
console.log(pedido.id); //imprime null
console.log(pedodo.valor); //imprime null

 

Abaixo segue o exemplo que funcionou:

var pedido= funcPedido();
function funcPedido(){
  var saida=null;
  $.ajax({
    async: false,
    dataType: "json",
    url: "getter.php",
    data: {param1: "pedidoId"},
    success: function(data) {
      saida= data;
    }
  });
  return saida;
}

console.log(pedido.id); //isso funcionou
console.log(pedido.valor); //isso funcionou \o/

Muito obrigado pela ajuda Angelo!!

Share this post


Link to post
Share on other sites

Sim, é verdade, comentou sim sobre a variável fora da função.. porem isso não funcionou com o $.getJSON()..
Só funcionou com $.ajax().

Uma outra coisa que não entendi foi:

var pedido= funcPedido();
function funcPedido(){
   //procedimentos...
}

A variável receber uma função vazia, e depois a função ser criada..

Tentei criar a função, e depois declarar a variável recebendo a função. Isso não funcionou. Vou pesquisar sobre isso para ter um melhor entendimento.

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 kikekun
      Olá!
      Eu queria fazer um criador de personagens para colocar na web, e tomei como base este código aqui: https://codepen.io/kristenmay/pen/kkkdBr pra fazer em javascript, mas ainda ta limitado pro que eu quero.
      Preciso de um botão que altere mais de uma imagem ao mesmo tempo (por exemplo: pra fazer com que duas imagens de cabelo apareçam ao mesmo tempo, uma na camada da frente, outra na de trás);  um botão para alterar as cores das imagens (até consegui colocar essa barra de HUE, mas ela só muda a cor da primeira imagem, e quando passa, volta pro padrão (esse vermelho que coloquei em todas pra facilitar). mas o ideal mesmo seria um botão especifico pra o tipo de imagem que esteja sendo mudada, por exemplo... o de cabelos mudaria a cor da imagem entre moreno; castanho claro; castanho escuro; branco; loiro claro; loiro escuro; e ruivo... já o botão de cor da pele mudaria entre branco; pardo; asiatico e negro); e um botão de download para as pessoas baixarem seu personagem criado = P Da pra fazer isso? como eu faço? xD (posso tentar postar o codigo em algum lugar se precisar)

      Ta assim:

    • By adriano.eurich
      Estou tendo dificuldade para entender como é feito o tratamento de mascaras e conversões de data, tenho a pagina cadastro.php onde tem os campos para digitar os dados um deles é a data de nascimento, onde coloquei as mascaras na pagina de script como mostra em anexo, dessa forma ele mostra certo os campos para o cliente digitar no formato 00/00/0000, porem quando envia ao banco ele aparece como mostra em anexo 0000-00-00, e na pagina consulta ele retorna o valor do banco dessa forma também. Gostaria que aparece a mascara na pagina consulta para o cliente digitar da forma certa 00/00/000 e enviasse ao bando sem as mascara se possível, mas que retornasse a pagina de consulta com as mascara certa no formato 00/00/000 
      Obs. Sei que o banco aceita apenas 2019-04-25, qualquer valor inserido em outro formato ele vai entender como 0000-00-00, mas como faria para aparecer na pagina de cadastro.php a mascara 25/04/2019 fosse passado para o banco 2019-04-25 e retorna na consulta.php 25/04/2019.
       
      Cadastro de Cliente
       
      Pagina Cadastro de Cliente.php <!-- Campo Data Nasc --> <div class="input-field col s12"> <i class="material-icons prefix">event_note</i> <input type="text" name="datanasc" id="datanasc" maxlength="10" required> <label for="datanasc"> DataNasc do Cliente</label> </div> -------------------------------------------------------------------------- Pagina create.php <?php session_start(); include_once 'conexao.php'; $nome = filter_input(INPUT_POST, 'nome', FILTER_SANITIZE_SPECIAL_CHARS); $email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL); $telefone = filter_input(INPUT_POST, 'telefone', FILTER_SANITIZE_NUMBER_INT); $cpf = filter_input(INPUT_POST, 'cpf', FILTER_SANITIZE_NUMBER_INT); $datanasc = filter_input(INPUT_POST, 'datanasc', FILTER_VALIDATE_INT); $querySelect = $link->query("select email from tb_clientes"); $array_emails = []; while ($emails = $querySelect->fetch_assoc()): $emails_existentes = $emails['email']; array_push($array_emails, $emails_existentes); endwhile; if(in_array($email,$array_emails)): $_SESSION['msg'] = "<p class='center red-text'>".'Já existe um cliente cadastrado com esse email'."</p>"; header("Location: ../CadCli.php"); else: $queryInsert = $link->query("insert into tb_clientes values(default,'$nome','$email','$telefone','$cpf','$datanasc')"); $affected_rows = mysqli_affected_rows($link); if($affected_rows > 0): $_SESSION['msg'] = "<p class='center green-text'>".'Cadastro efetuado com Sucesso!'."<br>"; header("Location: ../CadCli.php"); endif; endif; ----------------------------------------------------------------------------------------------------- Pagina read.php <?php include_once 'conexao.php'; $querySelect = $link->query("select * from tb_clientes"); while ($registros = $querySelect->fetch_assoc()): $id = $registros['id']; $nome = $registros['nome']; $email = $registros['email']; $telefone = $registros['telefone']; $cpf = $registros['cpf']; $datanasc = $registros['datanasc']; echo "<tr>"; echo "<td>$nome</td><td>$email</td><td>$telefone</td><td>$cpf</td><td>$datanasc</td>"; echo "<td><a href='editar.php?id=$id'><i class='material-icons'>edit</i></a></td>"; echo "<td><a href='banco_de_dados/delCliConfirma.php?id=$id'><i class='material-icons'>delete</i></a></td>"; echo "</tr>"; endwhile; --------------------------------------------------------------------------------------------------------------------- Pagina de Script Jquery <!-- Inicialização Jquery Mascaras --> <script type="text/javascript"> jQuery.noConflict(); jQuery(function($){ $("#datanasc").mask("99/99/9999"); $("#telefone").mask("(099)-99999-9999"); $("#cpf").mask("999 999 999-99"); }); </script>  

    • By Patrick Gabrel
      <html>   <head> <style> body{     background: #ecf0f1; }   #container-main{     margin:40px auto;     width:95%;     min-width:320px;     max-width:960px; }   #container-main h1{     font-size: 40px;     text-shadow:4px 4px 5px #16a085; }   .accordion-container {     width: 100%;     margin: 0 0 20px;     clear:both; }   .accordion-titulo {     position: relative;     display: block;     padding: 20px;     font-size: 24px;     font-weight: 300;     background: #fd0404;     color: rgb(0, 0, 0);     text-decoration: none; } .accordion-titulo.open {     background: #ff0000;     color: #fff; } .accordion-titulo:hover {     background: #1abc9c; }   .accordion-titulo span.toggle-icon:before {     content:"+"; }   .accordion-titulo.open span.toggle-icon:before {     content:"-"; }   .accordion-titulo span.toggle-icon {     position: absolute;     top: 10px;     right: 20px;     font-size: 38px;     font-weight:bold; }   .accordion-content {     display: none;     padding: 20px;     overflow: auto; }   .accordion-content p{     margin:0; }   .accordion-content img {     display: block;     float: left;     margin: 0 15px 10px 0;     width: 50%;     height: auto; }   @media (max-width: 767px) {     .accordion-content {         padding: 10px 0;     } } </style>     <script>         $(function(){ $(".accordion-titulo").click(function(e){   e.preventDefault();   var abra=$(this).next(".accordion-content");   if(abra.css("display")=="none"){ //open        abra.slideDown(250);             $(this).addClass("open"); } else{ //close      abra .slideUp(250); $(this).removeClass("open");     }   }); });     </script> </head> <body> <div id="container-main">   <h1>Os Mitos do Fut</h1>   <div class="accordion-container">   <a href="#" class="accordion-titulo">Messi<span class="toggle-icon"></span></a> <div class="accordion-content"> <img src="http://e0.365dm.com/15/05/660x350/champions-league-barcelona-bayern-munich-soccer-messi_3299830.jpg?20150506214236" alt=""/> <p>                     Biografia de Lionel Messi                     Lionel Messi (1987) é um jogador de futebol argentino que joga no time Barcelona. Foi considerado o melhor jogador do mundo por várias vezes e campeão por três anos consecutivos.                       Lionel Andrés Messi (1987) nasceu em Rosário, na Argentina, no dia 24 de junho de 1987.                     Revelou interesse pelo futebol desde a infância. Jogou num pequeno clube chamado Abanderado Grandoli, localizado perto de sua casa. Aos 7 anos, entrou para jogar no time Newell's Old Boys. Messi enfrentou problemas hormonais que lhe impedia o crescimento de forma natural.                    Por isso, fez tratamento com medicação injetável.                 </p> </div>   </div>   <div class="accordion-container"> <a href="#" class="accordion-titulo">CR7 (C.Ronaldo)<span class="toggle-icon"></span></a> <div class="accordion-content"> <img src="http://www.abc.es/Media/201301/10/cristiano-ronaldo--644x362.jpg" alt=""/> <p>                   </p> </div> </div>   </div> </body> </html>
    • By Gih Peixoto
      Boa noite, eu preciso fazer uma linha do tempo, e queria que ela fosse animada, por exemplo: quando o usuário da scroll na tela, as informações  (imagens)  começam a aparecer. Eu achei um código para essa parte, mas eu não queria que a imagem simplesmente brotasse na tela, eu queria que ela deslizasse dos cantos da tela e parasse do lado da linha. Alguém sabe como fazer algo parecido com isso? Espero que de para entender a explicação.
    • By VCastilho
      Bom Dia Estou tentando aplicar um HTML com Javascript no Portifólio do Meu Wordpress Mas assim que coloco ele deforma, como as imagens no final:  Em vez de modificar apenas horizontalmente, modifica também verticalmente, iguais as imagens, conferi o código e não localizei algo que causa isso, sendo que se visualizar o código no navegador, esta normal. A parte que esta desalinhado creio que consigo arrumar depois com o CSS Segue o código completo: <!doctype> <html> <head> <meta charset="utf-8"> <style> * { font-size: 16px; box-sizing: border-box; } button { display: block; margin: auto; } article { position: relative; display: inline-block; } aside { height: 200px; max-width: 260px; font-size: 3.2rem; font-weight: bold; line-height: 200px; display: inline-block; vertical-align: bottom; } aside#left { text-align: right; padding-right: 2rem; } aside#right { text-align: left; padding-left: 2rem; } .img-comp-container { height: 200px; min-width: 820px; position: relative; text-align: center; } .img-comp-img { width: 300px; height: 200px; overflow: hidden; position: absolute; } .img-comp-img img { display: block; vertical-align: middle; } .img-comp-slider { position: absolute; z-index: 9; cursor: ew-resize; width: 24px; height: 24px; background-image: url("http://images.tcdn.com.br/678962/themes/37/img/clicker1.png?325.80026377726244"); opacity: 1; } </style> </head> <body> <button onclick="initComparisons()">Centralizar ajustes</button> <div class="img-comp-container"> <aside id="left">Antes</aside> <article> <div class="img-comp-img "> <img src="https://www.lupadigital.info/wp-content/uploads/2018/05/imagens-gratis.jpg" width="280" height="200" alt="" /> </div> <div class="img-comp-img img-comp-overlay"> <img src="http://s2.glbimg.com/7B_srQyXERP_NoJCHSzgOnuwsyc=/smart/e.glbimg.com/og/ed/f/original/2017/07/26/best-sapce-photos-2017-designboom-10.jpg" width="280" height="200" alt="" /> </div> </article> <aside id="right">Depois</aside> </div> <script> slider = document.createElement("DIV"); slider.setAttribute("class", "img-comp-slider"); console.log(getId('right')); getId('right').style.width = getId('left').offsetWidth; function initComparisons() { var x, i, c, cc; getId('left').style.color = "#808080"; getId('right').style.color = "#808080"; x = document.getElementsByClassName("img-comp-overlay"); for (i = 0; i < x.length; i++) { x[i].style.width = "300px"; compareImages(x[i]); } function compareImages(img) { var clicked = 0, w = img.offsetWidth, h = img.offsetHeight; img.style.width = (w / 2) + "px"; img.parentElement.insertBefore(slider, img); img.parentElement.style.width = w; img.parentElement.style.height = h; slider.style.top = (h / 1) - (slider.offsetHeight / 2) + "px"; slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px"; slider.addEventListener("mousedown", slideReady); window.addEventListener("mouseup", slideFinish); slider.addEventListener("touchstart", slideReady); window.addEventListener("touchstop", slideFinish); function slideReady(e) { e.preventDefault(); clicked = 1; window.addEventListener("mousemove", slideMove); window.addEventListener("touchmove", slideMove); } function slideFinish() { clicked = 0; } function slideMove(e) { var pos; if (clicked == 0) return false; pos = getCursorPos(e) if (pos < 0) pos = 0; if (pos > w) pos = w; slide(pos); } function getCursorPos(e) { var a, x = 0; e = e || window.event; a = img.getBoundingClientRect(); x = e.pageX - a.left; x = x - window.pageXOffset; return x; } function slide(x) { c = 225 * x / w; cc = 225 - c; getId('right').style.color = "rgb(" + c + ',' + c + ',' + c + ")"; getId('left').style.color = "rgb(" + cc + ',' + cc + ',' + cc + ")"; img.style.width = x + "px"; slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px"; } } } function getId(ref) { return document.getElementById(ref); } initComparisons(); </script> </body> </html> Sendo que estou tentando utilizar tudo no mesmo arquivo, com o e o Estou fazendo errado? Há uma forma correta?

×

Important Information

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