I'm not an expert at JavaScript (especially with promises and callbacks), but what I'm basically trying to do is make my JavaScript file synchronously do the following tasks: 
1. Create an array
2. Push every element I need into the array
3. Send the array to a controller with a post ajax call.
Here are the functions I am using:

```
function initialize() {
    var detroit = new google.maps.LatLng(42.331427, -83.0457538);
    map = new google.maps.Map(document.getElementById('map'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: detroit,
        zoom: 15
    });
    var request = {
        location: detroit,
        radius: 500,
        types: ['restaurant']
    };
    infowindow = new google.maps.InfoWindow();
    service = new google.maps.places.PlacesService(map);
    var promise = new Promise(function (resolve, reject) {
        service.search(request, callback);
    });
    promise.then(returnList);
}

function callback(results, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
            restaurantCount = results.length;
            createMarker(results[i]);
        }
    }

    function createMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location
        });
        var request = {
            reference: place.reference
        };
        service.getDetails(request, function (details, status) {
            foodPlace = {
                PlaceID: details.place_id,
                Name: details.name,
                PriceLevel: details.price_level,
                WebSite: details.website,
                Rating: details.rating,
                AddressNumber: details.formatted_address,
                PhoneNumber: details.formatted_phone_number,
            };
            listOfRestaurants.push(foodPlace);
            //ajaxHelper('/api/Restaurants/', 'POST', foodPlace);
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent(details.name + "<br />" + details.formatted_address + "<br />" + details.website + "<br />" + details.rating + "<br />" + details.formatted_phone_number + "<br />" + details.price_level);
                infowindow.open(map, marker);
            });
        });
    }

    function returnList() {
        if (restaurantCount == listOfRestaurants.length) {
            $.ajax({
                url: '/Home/Index',
                data: listOfRestaurants,
                type: 'POST',
                traditional: true,
                success: alert("yay")
            }).fail(alert("oops"));
        }
    }

```

And the controller I'm making the POST call to is 

```
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public ActionResult Index(List<Restaurant> restaurants)
{
    List<Restaurant> validRestaurants = new List<Restaurant>();

    foreach(Restaurant r in restaurants)
    {
        if (ModelState.IsValid)
        {
            validRestaurants.Add(r);
        }

    }

    return View(validRestaurants);
}
}

```

And in my code I have

```
google.maps.event.addDomListener(window, 'load', initialize); 

```

to begin the initialize function when the window finishes loading.

The problem I'm having is that the data is always getting sent with the ajax call before the list has any data.
I would appreciate any help or suggestions.