Nested foreach in javascript in MVC

Question

I am creating an ASP.NET MVC application where I display a google map with coordinates from a database. I am a rookie at this and I have got stuck on an issue with nested foreach loops... On the C# Razor page I have a JavaScript function "Initialize" in which I loop through an array of objects containing the coordinates and create a polyline based on them and then add it to the map. This works fine and the code looks like this:

var latLongCoordinates =
[
    @foreach(var itemFlightState in Model.QARFlights[0].FlightStates)
    {
        <text> new google.maps.LatLng(@itemFlightState.PresentPosLatDec.ToString().Replace(",", "."), 
               @itemFlightState.PresentPosLongDec.ToString().Replace(",", ".")),</text>
    }
];

var flightPath = new google.maps.Polyline({
    path: latLongCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
});

flightPath.setMap(map);

However, I need to display several different polylines (one for each flight) and therefore need to use a nested foreach loop to achieve this but it doesn't work. I would like to surround the example above with another foreach loop to plot all flights and not just the one with index 0 as in the example above. The following is what I would like to do:

@foreach (var itemQARFlight in Model.QARFlights) {
    var latLongCoordinates =
    [
        @foreach(var itemFlightState in itemQARFlight.FlightStates)
        {
            <text> new google.maps.LatLng(@itemFlightState.PresentPosLatDec.ToString().Replace(",", "."), 
                   @itemFlightState.PresentPosLongDec.ToString().Replace(",", ".")),</text>
        }
    ];

    var flightPath = new google.maps.Polyline({
        path: latLongCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

    flightPath.setMap(map);
}

When adding the surrounding @foreach everything below turns red and it seems the parser does not understand what I mean at all any more.

Sorry if this is a trivial question but I really cannot manage to get around it. Any help would be greatly appreciated! Best regards Ulrika

TimTIM Wong · Accepted Answer · 2020-08-18 08:15:09Z

2

Note that @foreach brings you back to C#, so you need to wrap your JavaScript again in <text>.

@foreach (var itemQARFlight in Model.QARFlights) {
    <text>
        var latLongCoordinates =
        ...
        flightPath.setMap(map);
    </text>
}

answered Aug 18, 2020 at 8:15

TimTIM Wong

8176 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nested foreach in javascript in MVC

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related