1

Soy nuevo en JS, investigue pero seguramente no lo hice correctamente. La cosa es que estoy leyendo un json con $.getJSON() dentro lo guardo en una variable como sigue:

 $.getJSON('https://raw.githubusercontent.com/ZucaRol/PresentacionesR/master/test.json', function (geojson) {

        // Initiate the chart
         mapData = geojson;
         console.log(mapData);//se imprime el contenido del json

        });
console.log(mapData);// pero aquí mapData is not defined

Como se debe extraer una variable creada en función para utilizarla en código posterior?

0

4 respuestas 4

2

Como ya se ha dicho, las peticiones Ajax son asíncronas. Si tú quieres usar lo que devuelve la petición fuera de su contexto, debes pasar la variable a otra función que hace las veces de lo que se conoce como callback.

Ya @alanfcm ha mostrado una manera de hacerlo. Pero conviene que revises las recomendaciones que ofrece jQuery en su Learning center.

Allí, en el apartado The jqXHR Object ellos dicen que desde jQuery 1.5, las peticiones Ajax retornan un objeto que implementa la interfaz Promise. Para aprovechar las ventajas de esto, ellos recomiendan encarecidamente que se use el código asignando una variable a la petición, y luego asignándole las diferentes funciones de retorno tales como done, fail, always, complete. Algunas de estas funciones son opcionales. Pero conviene que al menos implementes done y fail. Por ejemplo, complete es útil para saber cuando se terminó totalmente la petición, always se muestra cada vez que una petición ha terminado todo el ciclo (pensemos en peticiones que se pueden enviar más de una vez.).

En este código, tú puedes manejar el resultado de la petición dentro del mismo done o lo puedes pasar desde done a una función que haría de callback. Y usamos always para mostrar el estado de la variable status.

/*
  Siguiendo las recomendaciones de jQuery LC 
  creamos una referencia a la petición
  para más tarde asignarle las funciones que vayamos
  a necesitar: done, fail, always, complet  ....
*/
var myAjax = $.getJSON('https://api.github.com/users/padrecedano');
var status = "";
myAjax.done(function(data) {
  status = "Todo OK";
  /*Aquí puedes usar data*/
  //console.log( data );  

  /*O lo puedes pasar a otra función*/
  myCallBack(data);
});

/*Aquí se manejan/muestran los eventuales fallos*/
myAjax.fail(function() {
  status = "Error";
  console.log("error");
});

/*Útil si queremos mostrar algo cuando la petición se haya completado*/
myAjax.always(function() {
  console.log("completada. status: " + status);
});

/*
  Esta sería la función que hace 
  de callback en caso de querer usar data 
  fuera del ámbito de la petición
*/
function myCallBack(data) {
  console.log(data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1

El problema es que $.getJSON es una funcion asincronea, lo que significa que cuando llamas la variable mapData afuera de la funcion, la llamada todavia no a retornado. En estos casos, puedes encerrar todo el codigo que quieres ejecutar en una funcion, y llamar a dicha funcion dentro de la llamada Ajax asi:

var callback = null;      
     $.getJSON('https://api.myjson.com/bins/9obzi', function (geojson) {
    
            // Initiate the chart
             mapData = geojson;
             console.log(mapData);//se imprime el contenido del json
             callback(mapData);
            });
    callback = function(data) {
        console.log(data);// pero aquí mapData is not defined
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

0

var jsondata = $.getJSON('https://raw.githubusercontent.com/ZucaRol/PresentacionesR/master/test.json');

jsondata.done(function(data) {

  console.log(data); // conjunto de datos que retorna
  
  /* inserta tu código y funcionalidades que siguen aquí una vez obtenidos */

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

0

Puedes resolverlo con Promesas (Promise).

var mapData;

new Promise( (resolve, reject) => {
	$.getJSON('https://jsonplaceholder.typicode.com/posts/1', function (geojson) {
         resolve(geojson);
        });
})
.then((data)=>{
	mapData = data;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.