Passing string[] to javascript

Question

I have an asp.net application and I'm trying to use google maps on it. When I attempt to pass the string array to javascript, per this post:

Passing value to javascript from asp.net

I am setting in the aspx form:

var locations = "<%=data %>";

The debug is evaluating the locations like this:

var locations = "System.String[]";

My data property is set like this:

protected string[] data;
protected void Page_Load(object sender, EventArgs e)
{
  data = new string[] { "26.2486591339111,-80.2002334594727", "26.2344417572021,-80.1393356323242", "26.0818271636963,-80.2083358764648", "26.2701854705811,-80.1152496337891", "26.2009468078613,-80.1440734863281" };
}

I am not getting any lat/lon values in locations. What am I doing wrong?

I am relatively new to Javascript so please be kinds :D

Thank you!

EDIT#1

I did try " and ' around the <%=data %> and neither made a difference.

EDIT#2

The body of the aspx in case it helps:

<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
      //var locations = [
      //  ['Bondi Beach', -33.890542, 151.274856, 4],
      //  ['Coogee Beach', -33.923036, 151.259052, 5],
      //  ['Cronulla Beach', -34.028249, 151.157507, 3],
      //  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      //  ['Maroubra Beach', -33.950198, 151.259302, 1]
      //];

      var locations = '<%=data %>';

      var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 10,
          center: new google.maps.LatLng(-33.92, 151.25),
          mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var infowindow = new google.maps.InfoWindow();

      var marker, i;

      var pinColor = "#";
      for (k = 0; k < 3; k++) {
          pinColor += ("0" + (Math.random() * 256 | 0).toString(16)).substr(-2);
      }

      var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
                  new google.maps.Size(21, 34),
                  new google.maps.Point(0, 0),
                  new google.maps.Point(10, 34));
      var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
                  new google.maps.Size(40, 37),
                  new google.maps.Point(0, 0),
                  new google.maps.Point(12, 35));

      for (i = 0; i < locations.length; i++) {
          marker = new google.maps.Marker({
              position: new google.maps.LatLng(locations[i][1], locations[i][2]),
              icon: pinImage,
              shadow: pinShadow,
              map: map
          });

          google.maps.event.addListener(marker, 'click', (function (marker, i) {
              return function () {
                  infowindow.setContent(locations[i][0]);
                  infowindow.open(map, marker);
              }
          })(marker, i));
      }
  </script>
</body>

Sasha · Accepted Answer · 2016-02-19 18:09:12Z

3

.NET Array doesn't have ToString() method which you expect - it's being using Object's base classes implementation which just returns type name (System.String[]) instead of stringifying actual data.

Straightforward workaround (but not that good) that you need to implement your own string converter, or just serialize data to JSON as follows:

var locations = "<%=Html.Raw(new JavascriptSerializer().Serialize(data)) %>";

Html.Raw is needed to avoid HTML-encoding of your JSON.

PS: It's not recommended way of building javascript using MVC server-side injections. I'd strongly recommend to make a separate call to load your data with Ajax, or at least render it in HTML somewhere and read in Javascript then.

answered Feb 19, 2016 at 18:09

Sasha

8,8804 gold badges55 silver badges80 bronze badges

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

Comments

Soham Dasgupta · Accepted Answer · 2016-02-19 19:16:07Z

0

A much simpler one.

var locations = ["<%= string.Join(",", data) %>"];

answered Feb 19, 2016 at 19:16

Soham Dasgupta

5,24926 gold badges81 silver badges129 bronze badges

Collectives™ on Stack Overflow

Passing string[] to javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related