Question

I am returning a model from my controller that displays a grid. Works fine. I also need to use that same data to produce points on a google map. I have the following code set up in my prototype that I needed to replace:

            var locationsAll = [
                ["Pretty", 40.1508, -83.21],
                ["Little", 40.1308, -83.11],
                ["Smug", 40.001, -83.01],
                ["Troublemaker", 40.109, -83.291],
                ["Smallest", 40.08, -83.20]
                ];

            PlotpointsonMap(locationsAll);

So far so good. That works so I am converting this to javascript like so:

                @{
                    var locations = "[";
                   foreach (var gmap in Model.MapPoints )
                   {
                       locations += "['" + gmap.EventStringData + "'," + gmap.Latitude + "," + gmap.Longitude + "],";
                   }

                    locations = locations.TrimEnd(',') + "]";

                }

            var myLocations = @locations;
            PlotpointsonMap(myLocations);

However, this half works. I am getting the following code in my javascript block when I view the source generated:

var myLocations = [["update",40.080398,-83.139141] 

I need it to render like so:

var myLocations = [["update",40.080398,-83.139141]

Any ideas on how to accomplish this are greatly appreciated. I tried:

var myLocations = @Server.HtmlDecode(locations);

and it gave me the same result 🙁

Answer 1

Wooow, no! No manual JSON manipulation please. No commas, no quotes, no trims, no brackets please. That hearts.

Simply use a JSON parser:

<script type="text/javascript">
    var locationsAll = @Html.Raw(Json.Encode(
        Model.MapPoints.Select(x => new object[] 
        { 
            x.EventStringData, x.Latitude, x.Longitude 
        })
    ));
    PlotpointsonMap(locationsAll);
</script>

The JSON parser guarantees you now that no matter what data you have in this MapPoints it will always be properly encoded.