How to iterate over @Model.ICollection in Java Script function?

Question

I have a @Model.LoginCoordinates where LoginCoordinates is ICollection<Coordinates>.

The Coordinates class:

public class Coordinates {
    public int Id { get; set; }
    public double Latitude { get; set; }
    public double Longitude { get; set; }
}

Inside the view in I have:

<script>
    function f(){
       for (var i = 0, n  = @Model.LoginCoordinates.Count; i < n; i++) {
                    alert(i);//works fine, I just wanted to check if the loop works at all
       }
    }
</script>

It works fine, but instead of that I would like to display all the do:

 <script>
     function f(){
          for (var i = 0, n  = @Model.LoginCoordinates.Count; i < n; i++) {
                  var latitute = @Model.LoginCoordinates[i].Latitude;
                  var longituted = @Model.LoginCoordinates[i].Longitude;
         }
     }
</script>

But I cannot access i element of the LoginCoordinates because it is ICollection. Also I believe foreach is impossible at it is c# object.

Question: how to iterate over ICollection inside JavaScript?

EDIT

This above is SSCCE, the real code is;

  var map;
    function InitializeMap() {
        alert('works');
        var lat = @Model.LoginCoordinates.First().Latitude;
        var lon = @Model.LoginCoordinates.First().Longitude;
        var latlng = new google.maps.LatLng(lat, lon);
        var mapOptions =
        {
            zoom: 16,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true
        };
        map = new google.maps.Map(document.getElementById("map"), mapOptions); //this breaks the script

    }
    window.addEventListener('load', InitializeMap);

Can I ask what you need to do with this data that it can't be done in the view without javascript? — area28, Jun 16 '15 at 16:31
@area28 I want to display on google map all coordinates that are in this collection. So I wanted to iterate over it and create marker for every latitude and longitude pair inside that loop. — Yoda, Jun 16 '15 at 16:42
I have tried working with a similar data set in a dotnetfiddle and was unable to make it work. A workaround is to put the coords on the DOM somewhere and access them with javascript. — area28, Jun 16 '15 at 16:49
@area28 Please have a look at my edit. Maybe there is possiblity to pass array of strings to the java script after converting this `ICollection` to the `String[]` inside foreach loop. — Yoda, Jun 16 '15 at 16:53

score 1 · Accepted Answer · edited Jun 17 '15 at 10:32

1

This should do it using JsonConvert from newtonsoft.json

<script>
var coordinatesJson='@Html.Raw(JsonConvert.Serialize(Model.LoginCoordinates.ToArray())'

var coordinates=JSON.parse(coordinatesJson);

//you now have coordinates as javascript  object

var map;
function InitializeMap() {
    // could loop over if needed
     for(var coords in coordinates) {
        // do something with coords
     }
</script>

edited Jun 17 '15 at 10:32

ZeissS

11,867
4
35
50

answered Jun 16 '15 at 17:17

area28

1,425
1
9
11

Do you know why for in loop never ends? alerts inside that loop work, but just after it they don't. – Yoda Jun 16 '15 at 18:52
Same if you change it to `for(var i=0;i – area28 Jun 16 '15 at 18:55
No, I forgot to mention. I changed it to the version you showed in the comment a minute after my comment. – Yoda Jun 16 '15 at 19:11

score 0 · Answer 2 · answered Jun 16 '15 at 16:21

0

How about

<script>
 function f(){
     var coordinates= @Model.LoginCoordinates.ToArray();
     for (var i = 0, n  = coordinates.Length; i < n; i++) {
              var latitute = coordinates[i].Latitude;
              var longituted = coordinates[i].Longitude;
     }
 }
</script>

answered Jun 16 '15 at 16:21

Gurpreet

1,382
11
24

i also belive that this is not going to work for you in javascript because you cannot mix your c# code with javascript. ask me again if you did not find your answer yet. – Gurpreet Jun 16 '15 at 16:24
This line: `var coordinates= @Model.LoginCoordinates.ToArray();` breaks the script, I can't find the exception or compilation error(in chrome console), but alerts inside my function stop working when I add this line. – Yoda Jun 16 '15 at 16:49
Please notice my EDIT in the original post. – Yoda Jun 16 '15 at 16:52

score 0 · Answer 3 · answered Jun 16 '15 at 17:10

The Model is only accessible on the server-side as the view is being rendered. Therefore, in order to access its properties on the client-side, you would need to iterate over the collection in C# (razor) and generate HTML that the client-side JavaScript code could then access.

Another alternative would be to create a controller method that returns the model as JSON and call it from the client-side code via AJAX.

score 0 · Answer 4 · answered Jun 17 '15 at 15:38

For what it's worth, this syntax may be useful to someone:

      @section Scripts {
      <script type="text/javascript">  
        @if (Model.LoginCoordinates.Any())
        {
            //C# loop over C# object
            foreach (var point in Model.LoginCoordinates)
            {
                //We are mixing C# and JS code here
                //you could call google's JS API, but still work with C# object properties
                @:console.log(@point.Latitude, @point.Longitude);
            }
        }
      </script>
     }

How to iterate over @Model.ICollection in Java Script function?

4 Answers4