how top pass data to javascript in django

Question

I am looking for a way to pass data to the index.js script from django view. Sample simple view:

   def map_display(request):
        data = [
        {'lat': 52.20415533, 'lng': 21.01427746},
        {'lat': 52.20418, 'lng': 21.014386},
        ]
        data = json.dumps(data)
        return render(request, 'index.html', {"data": data} )

How to pas list data to flightPlanCoordinates variable?

index.js

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: { lat: 0, lng: -180 },
    mapTypeId: "terrain",
  });
  const flightPlanCoordinates = {{ data}};  # <--- pass here
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });
  flightPath.setMap(map);
}

index.html

<html>
  <head>
    <title>Simple Polylines</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <link href= "{% static 'css/style.css' %}"  rel="stylesheet" type="text/css">
    <script src="{% static 'js/index.js' %}" ></script>
  </head>
  <body>
    <div id="map"></div>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=........=initMap&libraries=&v=weekly"
      async
    ></script>
  </body>
</html>

Does this answer your question? [Django Template Variables and Javascript](https://stackoverflow.com/questions/298772/django-template-variables-and-javascript) — Abdul Aziz Barkat, Jul 15 '21 at 13:59
don't put data to `index.js` but put directly to `index.html` as JavaScript variable before you load `index.js` and use this variable in `index.js`. OR if you run `initMap()` in `index.html` then run it with your data as `initMap(your_data)` — furas, Jul 15 '21 at 14:59

furas · Answer 1 · 2021-07-16T17:51:39.350

0

I would set it directly in index.html before loading index.js

<script> const flightPlanCoordinates = {{ data }}; </script>
<script src="{% static 'js/index.js' %}" ></script>

Or if function is executed directly in HTML the I would send it as argument

<script src="{% static 'js/index.js' %}" ></script>
<script> initMap({{ data }}) </script>

EDIT:

Read also @AbdulAzizBarkat comment about XSS vurnerability and see article.

edited Jul 16 '21 at 17:51

answered Jul 15 '21 at 15:52

furas

134,197
12
106
148

I would **not** render _into javascript_, it is a potential XSS vulnerability. See this [article](https://www.django-antipatterns.com/antipattern/rendering-into-javascript.html) (Note: I have authored that specific article, with the others on that site also being by another SO user [Willem Van Onsem](https://stackoverflow.com/users/67579/willem-van-onsem)) – Abdul Aziz Barkat Jul 16 '21 at 13:41
@AbdulAzizBarkat yes, XSS can be problem if user can't control data which he send to page. In my answer I tried only to show that data doesn't have to be send to `index.js` but it can be set in HTML or it can be send as argument. I added your link to answer. – furas Jul 16 '21 at 17:53

how top pass data to javascript in django

1 Answers1