Geocoding an array of addresses?

Question

JavaScript

I get an array of addresses, each one needs to be geocoded-get the coordinates and add to the new array already with the coordinates it
smells like callbackhellom
how to do it

for (var i = 0; i < items.length; i++) {
                    var item = items[i];
                    GMaps.geocode({
                        address: item.address+" "+item.city+" "+item.zip,
                        callback: function(results, status) {
                            if (status == 'OK') {
                                var latlng = results[0].geometry.location;
                                map.setCenter(latlng.lat(), latlng.lng());

                                markers_data.push({
                                    id: item.id,
                                    lat : latlng.lat(),
                                    lng : latlng.lng(),
                                    title : item.name,
                                    icon : {
                                        size : new google.maps.Size(32, 32),
                                        url : icon
                                    },
                                    infoWindow: {
                                        content : ''
                                    }
                                });
                            }
                        }
                    });

after everyone is geocoded, you need to call a common callback and add all the markers to the map with one call
. In addition, the item object is not available inside the GMaps.geocode callback callback,
help me

Answer 1

If there is no desire to drag async, then you can do something like this:

var pro = new Promise(function(resolve, reject){
    //...your code
    callback: function(results, status) {
        if (status == 'OK') {
            // тест на кол-во записей в markers_data или на последнюю итерацию цикла
            //если так то resolve(markers_data)
        }
    }
    //...
}).then(function(markers_data){
    //...
})

If there is no desire to use promises, then callbackhell is welcome!
And item should be visible...
Well, you can still throw an event. Use some kind of EventEmitter, well, or on window...

Answer 2

It seems that async .map is just for this.
If the task is one and the entire library is not needed, the analogue of async.map is implemented quite simply.
Btw, caolan seems to cope with this without promises, in the simplest implementation somehow

So

var list_of_items_to_process = [ 1, 2, 3, 4, 5 ];

function asyncMap(list, exec, callback) {
  var processed = 0;

  list.forEach(function(current, index, array) {
    exec(current, index, array, innerCallback.bind(index));
  })

  function innerCallback(result) {
    list[this] = result;
    processed++;
    if (processed === list.length) {
      callback(list);
    }
  }
}

function processor(value, index, array, callback) { 
  var result;
  setTimeout(function() { 
    result = value*Math.round(Math.random()*10);
    console.log(result)
    callback(result); 
  }, 500*value); 
}

function mainCallback(values) {
  console.log(values);
}

asyncMap(list_of_items_to_process, processor, mainCallback)

If I didn’t mess up anything, then after you form items , you just need to execute

This

function asyncMap(list, exec, callback) {
  var processed = 0;

  list.forEach(function(current, index, array) {
    exec(current, index, array, innerCallback.bind(index));
  })

  function innerCallback(result) {
    list[this] = result;
    processed++;
    if (processed === list.length) {
      callback(list);
    }
  }
}

function processor(value, index, array, cb) {
  GMaps.geocode({
    address: value.address + " " + value.city + " " + value.zip,
    callback: function(results, status) {
      if (status == 'OK') {
        cb(results);
      } else {
        cb(false);
      }
    }
  });
}

function mainCallback(values) {
  values.forEach(function(value) {
    if (!value) return;

    var latlng = results[0].geometry.location;
    map.setCenter(latlng.lat(), latlng.lng());

    markers_data.push({
      id: value.id,
      lat: latlng.lat(),
      lng: latlng.lng(),
      title: value.name,
      icon: {
        size: new google.maps.Size(32, 32),
        url: icon
      },
      infoWindow: {
        content: ''
      }
    });
  });
}

asyncMap(items, processor, mainCallback)