Несколько возвратов от обратного вызова в JavaScript - PullRequest
Новая
       16

Несколько возвратов от обратного вызова в JavaScript

0 голосов
/ 27 сентября 2018

Я использую getJSON для получения данных из базы данных, которые затем отображаю на карте с помощью Leaflet.

Я хочу использовать несколько вызовов getJSON, которые затем отображаются как разные слои на одной карте.Моя проблема заключается в том, как заставить обратный вызов работать с несколькими вызовами geoJSON в функции getData.Или в качестве альтернативы (я не уверен, что это лучший подход) - наличие нескольких версий функции getData и возможность доступа ко всем из них для формирования слоев.

Для одного getJSON работает следующее: 

function getData(callback) {
   $.getJSON("getData.php", callback );
}

getData(function(data) {
   let markerlist = [];

   for (let i = 0; i< data.length; i++) {
      let location = new L.LatLng(data[i].siteLat, data[i].siteLon);
      let marker = new L.Marker(location, {
         icon: myIcon,
         title: 'thetitle' });

         markerlist.push(marker);
      }

      let myLayerGroup = L.layerGroup(markerlist) // create the layer
      map.addLayer(myLayerGroup); // add the layer to the map

      var overlays = {"layername":myLayerGroup};
      L.control.layers(baseLayers,overlays).addTo(map);

   });

Я пытался следовать Необходим обратный вызов возвращает несколько значений в nodejs , что выглядит аналогично, но безуспешно.

Я пытался: 

function getData(callback) {
   let callbackString = {};
   $.getJSON("getData.php", callbackString.set1);
   $.getJSON("getOtherData.php", callbackString.set2);
   callback(null,callbackString);
}

getData(function(data) {
   let data1 = data.set1;
   let data2 = data.set2;
   let markerlist = [];

   for (let i = 0; i< data1.length; i++) {
      let location = new L.LatLng(data1[i].siteLat, data1[i].siteLon);
      let marker = new L.Marker(location, {
         icon: myIcon,
         title: 'thetitle' });

         markerlist.push(marker);
      }

      let myLayerGroup = L.layerGroup(markerlist) // create the layer
      map.addLayer(myLayerGroup); // add the layer to the map

      var overlays = {"layername":myLayerGroup};
      L.control.layers(baseLayers,overlays).addTo(map);

   });

, который выдал ошибку TypeError: null is not an object (evaluating 'data.set1')

Я не знаю, с чего начать иметь несколько версий getData, а затем получить доступ ко всеминформация в функции данных.

1 Ответ

0 голосов
/ 27 сентября 2018

Этот код 

let callbackString = {};
$.getJSON("getData.php", callbackString.set1);
$.getJSON("getOtherData.php", callbackString.set2);
callback(null,callbackString);

.set1 и .set2 будет неопределенным, потому что вы только что создали callbackString как пустой объект!Я думаю, вы неправильно поняли цель второго аргумента для getJSON ... это данные, которые отправлены в запросе

Вы также вызываете функцию обратного вызова с первым аргументом какnull - но вы пытаетесь использовать getData, например 

getData(function(data) { ...

, поэтому data всегда будет null

Кроме того, $ .getJSON асинхронен и ваш код не ожидает завершения запроса - поэтому у вас не будет возможности получить доступ к результатам

Возможно, это поможет 

function getData(callback) {
   $.when($.getJSON("getData.php"), $.getJSON("getOtherData.php")).then(function(set1, set2) {
        callback({set1:set1, set2:set2});
   });
}

однако, если вы захотитеправильная обработка ошибок, тогда вы можете сделать что-то вроде 

function getData(callback) {
   $.when($.getJSON("getData.php"), $.getJSON("getOtherData.php"))
   .then(function(set1, set2) {
        callback(null, {set1:set1, set2:set2});
   })
   .catch(function(err) {
       callback(err);
   });
}


getData(function(err, data) {
    if (err) {
        //handle error
    } else {
        let data1 = data.set1;
        let data2 = data.set2;
        let markerlist = [];
        ...
        ...
    }
});

Лично, потому что $.getJSON возвращает обещание (ну, версия обещания jQuery), я бы с большей вероятностью написалкод как: 

const getData = () => Promise.all([$.getJSON("getData.php"), $.getJSON("getOtherData.php")]);

getData()
.then(([data1, data2]) => { // note that data1, data2 are now the arguments to the function
    let markerlist = [];
    for (let i = 0; i< data1.length; i++) {
    ...
    ...
    }
})
.catch(err => {
    // handle errors here
});
...