Adding multiple addresses - ArcGIS Javascript

Question

I am trying to use ArcGIS Javascript API to add all of the service orders that are open to a map. I can get this to work with a single address, but it is not working when I try to loop through a list containing addresses. I am not too familiar with using javascript, but I do not see anything wrong with the actual code.

I have already looked at "Geocoding Multiple Addresses using ArcGIS JS API," but it did not work for me.

ESRIMapView (cshtml)- This contains the code to map all of the service orders:

 window.onload = function locateAll() {
               map.graphics.clear();

               var addresses = Viewbag.Addresses;
               var addressCount = Viewbag.Addresses.length;

               for (i = 0; i < addressCount; i++)
               {
                   locator.outSpatialReference = map.spatialReference;
                   var options = {
                       address: addresses[i],
                       outFields: ["Loc_name"]
                   }
                   locator.addressToLocations(options);
               }
           }

HomeController.cs:

 public ActionResult ESRIMapView(string address)
        {
            ViewBag.Message = "Your contact page.";
            MFSRepository _repository = new MFSRepository();

            List<ServiceOrder> orders = new List<ServiceOrder>();
            orders = _repository.GetServiceOrderAddresses();

            List<string> addresses = new List<string>();

            foreach (ServiceOrder order in orders)
            {
                addresses.Add(order.StreetNumber + " " + order.StreetName + " " + order.City + " " + order.State + " " + order.Zip);
            }

            ViewBag.Addresses = addresses;
            ViewBag.Address = address;

            return View();
        }

As I step through the code in the controller, everything is being set correctly. I also know that it is getting the list of addresses from the controller because I was able to put the first one in the list into a textbox through that ESRIMapView. Nothing is being plotted on the map, and I am not getting any errors. My guess is that my syntax for the loop is probably wrong.

Answer 1

Here is a very simple demo of this concept: https://dotnetfiddle.net/KhMIxV

What you are going to want to do is make it so that your array in the controller can be translated to an array in javascript. This process is facilitated through serialization. The most common way (and one which should be available to your controller inherently) is through JSON.Net, aka NewtonSoft.Json.

Change your controller's actionresult to this

public ActionResult ESRIMapView(string address)
{
    ViewBag.Message = "Your contact page.";
    MFSRepository _repository = new MFSRepository();

    List<ServiceOrder> orders = new List<ServiceOrder>();
    orders = _repository.GetServiceOrderAddresses();

    List<string> addresses = new List<string>();

    foreach (ServiceOrder order in orders)
    {
        addresses.Add(order.StreetNumber + " " + order.StreetName + " " + order.City + " " + order.State + " " + order.Zip);
    }

    ViewBag.Addresses = JsonConvert.SerializeObject(addresses);
    ViewBag.Address = address;

    return View();
}

And then consume it in your view like this

var addresses = @Html.Raw(ViewBag.Addresses);
var addressCount = addresses.length;

window.onload = function locateAll() {
    map.graphics.clear();

    for (i = 0; i < addressCount; i++)
    {
        locator.outSpatialReference = map.spatialReference;
        var options = {
            address: addresses[i],
            outFields: ["Loc_name"]
        }
        locator.addressToLocations(options);
    }
};