¿Como definir una función callback en una petición getJson?

Question

Estoy tratando de solventar el problema con las peticiones asíncronas. Para recorrer una matriz de direcciones y obtener otra con las coordenadas de cada dirección. En el ejemplo ¿Cómo obtener la respuesta de una llamada ajax fuera de ella? indican como solución las funciones callback. Pero no se como implementarla. El último console.log sigue mostrando "undefined".

function getCoordenadas(){
  var addresses = [
    {name: 'Asensio Gonzalez', address:'C/San Marcos 377, 1ºB, 28030 Madrid' },
    {name: 'Javier Gomez', address:'C/San Pere 152, 4ºC, esc drc, 14050 Malaga'},
    {name: 'Irene Montealegre', address:'C/San Juan 8, 1ºB, 33500 Alicante'},
    {name: 'Tobias Ibarretxe', address:'C/San Antonio 7, 1ºB, 12500 Donostia'},
    {name: 'José García', address:'C/San Fermin 3, 1ºB, 13600 Caceres'},
  ];

  var coords=[];
  for (var x = 0; x < addresses.length; x++) {
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x].address+'&sensor=false', null, function (data) {
      callback(data);
    });
  }

  function callback(data){
    var lat = data.results[0].geometry.location.lat
    var lng = data.results[0].geometry.location.lng;
    coords.push( new Array({lat:lat,lng:lng}));
    //console.log({lat:lat,lng:lng} )
  }

  console.log('Coordenadas '+ coords );
}

score 3 · Answer 1 · answered Sep 06 '18 at 11:52

Pruebalo asi

<script>
var addresses = [
    {name: 'Asensio Gonzalez', address:'C/San Marcos 377, 1ºB, 28030 Madrid' },
    {name: 'Javier Gomez', address:'C/San Pere 152, 4ºC, esc drc, 14050 Malaga'},
    {name: 'Irene Montealegre', address:'C/San Juan 8, 1ºB, 33500 Alicante'},
    {name: 'Tobias Ibarretxe', address:'C/San Antonio 7, 1ºB, 12500 Donostia'},
    {name: 'José García', address:'C/San Fermin 3, 1ºB, 13600 Caceres'},
];
var coords=new Array();
function Console(){
    console.log(coords);
}
var cnt=0;
for (var x = 0; x < addresses.length; x++) {
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x].address+'&sensor=false', null, function (data) {
        var lat = data.results[0].geometry.location.lat
        var lng = data.results[0].geometry.location.lng;
        coords.push( new Array({
            lat:lat,
            lng:lng
        }));
        cnt++
        if(cnt==addresses.length) Console();
    });
}
</script>

El metodo $.getJSON(); ya incluye el callback jQuery.getJSON( url [, data ] [, success ] )

Mas info https://api.jquery.com/jquery.getjson/

Espero te funcione :)

El usar un contador es la forma más sencilla para saber el número de respuestas recibidas. Otra opción sería usar fetch y [promesas](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/all) — Pablo Lozano, Sep 06 '18 at 13:31

score 0 · Answer 2 · answered Sep 06 '18 at 11:49

El último console.log te da undefined porque se ejecuta antes de que se obtenga la respuesta en getJSON. Para que te muestre los valores correctos deberías pasar el console.log dentro del callback:

function callback(data){
    var lat = data.results[0].geometry.location.lat
    var lng = data.results[0].geometry.location.lng;
    coords.push( new Array({lat:lat,lng:lng}));
    console.log('Coordenadas '+ coords );
}

UHDante · Answer 3 · 2018-09-06T12:37:33.927

Adicionalmente a las otras respuesta, te paso un ejemplo simple que te valdrá para entender como funcionan las funciones de callBack:

// Llama a conCallBack y le pasa la función a la que quiere que se invoque 
// cuando se termine su ejecución.

conCallBack(1, successCallback) 

function successCallback(numero) {
    console.log('El numero es: ' + numero);
}

var conCallBack = function (numero, successCallback) {
    if (numero==1 || numero==3) {
        if (successCallback == undefined || successCallback == null) {
                return -1;
        }
        successCallback(numero);
    } else return -2;
}

o en tu caso se ajusta más la función embebida directamente en la llamada ya que puedes ver conCallBack como una alternativa a getJSON:

conCallBack(1, function successCallback(numero) {
    console.log('El numero es: ' + numero);
})

var conCallBack = function (numero, successCallback) {
    if (numero==1 || numero==3) {
        if (successCallback == undefined || successCallback == null) {
                return -1;
        }
        successCallback(numero);
    } else return -2;
}

¿Como definir una función callback en una petición getJson?

3 Answers3

Linked