3

Estou tentando pegar os dados de um JSON através de javascript com a função getJSON do Jquery, mas está retornando undefined. Segue o código:

$(document).ready(function(){
    $("#log").append(pegaPrev("São Paulo-SP"));
});

function pegaPrev(cidade){

	var dados;
	var servidor = "http://developers.agenciaideias.com.br/tempo/json/" + cidade;
	
	$.getJSON( servidor, function(data){
		dados = data;
	});
	
	
	return dados;
}
<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset='UTF-8'>
		<meta http-equiv='content-type' content='text/html; charset=UTF-8'>
        	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	</head>
	<body>
		<div id="log"></div>
	</body>
</html>

3
  • não consigo reproduzir seu erro aqui cara. Tentei acessar essa URL diretamente no Browser e deu certo. Tentei criar um .html e executar ele, deu certo. :/
    – tayllan
    9/03/2016 às 21:59
  • Mas ele imprime os valores do json na página ? Aqui não imprime o valor e quando abro o console no Firefox tem esse erro.
    – Carlos
    9/03/2016 às 22:04
  • Não está mais dando esse erro. Acho que me enganei. Mas ainda não funciona. Como eu disse, está retornando undefined.
    – Carlos
    9/03/2016 às 22:19

2 Respostas 2

4

Do jeito que está, sua função não vai dar append de nada na <div>. Isso porque a função $.getJSON() é assíncrona, ou seja, ela não é executada exatamente no mesmo momento em que é chamada.

Então o que ocorre no seu código é que:

  1. você cria uma variável var dados;, inicializada com o valor undefined padrão do JavaScript.

  2. você chama $.getJSON() para executar, a qual você espera que defina o valor da variável dados criada acima, mas isso não acontece;

  3. você retorna dados, a qual ainda não foi definida, porque $.getJSON() ainda não executou.

O que você deve fazer é utilizar uma callback function, da forma que é sugerida pela documentação da função $.getJSON():

$(document).ready(function() {
	pegaPrev("São Paulo-SP", function(dados) {
		$('#log').append(dados);
	});
});

function pegaPrev(cidade, callback) {
	var servidor = "http://developers.agenciaideias.com.br/tempo/json/" + cidade;

	$.getJSON( servidor, function(data) {
		callback(JSON.stringify(data));
	});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div id="log"></div>

Perceba que o append do JSON retornado pela chamada à $.getJSON() é feito dentro de uma função que você passa como parâmetro para pegaPrev().

JSON.stringfy() foi utilizada porque o valor retornado pela função $.getJSON() é um objeto JSON, o qual você não pode utilizar para dar append na <div>. Essa função converte o objeto JSON em uma string.

1
  • 1
    Obrigado. Ajudou bastante.
    – Carlos
    9/03/2016 às 22:32
0

Eu estou com um problema semelhante, faz 3 dias que pelejo e nada!

código javascript

var readUrlHome = "/Home/LerGrafico/"; var barChartData;

function getJsonData(idIndicadores, idUgbs) {
    $.getJSON(readUrlHome, { IdIndicador: idIndicadores, IdUGB: idUgbs }, function (data) {
        barChartData = data;
    });
}

var dataFromLoadData;

function loadData(idIndicadores, idUgbs) {
    $.getJSON("/Home/LerGrafico/", { data:{ IdIndicador: idIndicadores, IdUGB: idUgbs }, format: "json" }).done(function (data) {
        dataFromLoadData = data;
    });
}

var dataFromLoadData02;

function LoadData02(idIndicadores, idUgbs) {
    var property = this;
    this.getingData = function () {
        $.getJSON(readUrlHome, { IdIndicador: idIndicadores, IdUGB: idUgbs }, function (data) {
            return data;
        });
    }
}

var dataFromLoadDataAjax;

function LoadDataAjax(idIndicadores, idUgbs) {
    var datatoreturn;
    $.ajax({
        type: 'GET',
        dataType: 'json',
        url: '/Home/LerGrafico/',
        data: { IdIndicador: idIndicadores, IdUGB: idUgbs },
        success: function (data, msg) {
            dataFromLoadDataAjax = data;
            datatoreturn = data;
            alert(msg)
        }
    });

    return datatoreturn;
}

esse ultimo metodo exibe um alerta com msg de sucesso.

os exemplos acima não funcionam, em todos esses exemplos a var declarada antes do método continua undefined, um desses métodos ai, o que funcionasse, é chamado dentro de uma outra função executada quando eu escolho um item em um drop down list.

Alguma ideia do que eu possa fazer?

Editando:

Consegui fazer dar certo, ao invés de o get json retornar o resultado armazenando em uma variável eu coloquei o método javascript que faria uso dos dados requisitados, já tinha tentado antes mas tinha dado um erro em um valor dentre os dados retornados, quando parei pra verificar percebi que era um erro ao carregar esse valor errado no chartjs. pensei que a chamada não estava funcionando mas o erro era na montagem do chartjs, depois de perceber isso alterei o esse valor e deu certo.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .