Множественные возвраты из обратного вызова в javascript

Я использую 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);

   });

Я пытался следовать Обратный вызов Need возвращает несколько значений в 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, а затем получить доступ ко всей информации в функции данных.

$.getJSON("getData.php", callbackString.set1); ... set1 будет неопределенным, потому что вы только что создали callbackString как пустой объект! Я думаю, вы неправильно поняли цель второго аргумента getJSON ... это данные послал в запросе
Jaromanda X 27.09.2018 04:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
142
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Этот код

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
});

Спасибо - я выбрал версию Promise внизу, и у меня она сработала. Вы определенно правы, что я неправильно понял второй аргумент getJSON -> Я следовал примеру и, поскольку он работал, я использовал его.

Esme_ 27.09.2018 04:59

Другие вопросы по теме