Passing data from Django views/template into the static javascript

Question

This question has been asked in multiple ways, however the solutions such as defining variables before the script tag haven't worked.

template.html

<script>
    var locations = {{ some_variable }}
</script>
<script type="text/javascript" src="{% static 'base/scripts/maps.js' %}"></script>

I believe this is because maps.js is actually a function. The start of it is as follows:

maps.js

(function($){
    "use strict";

    function mainMap() {
      var ib = new InfoBox();

       // Infobox Output
       function locationData(locationURL,locationImg,locationTitle, locationAddress, locationRating, locationRatingCounter) {
           return('SOME_HTML_WITH_VARIABLES')
      }

       // Locations
       var locations = [
         [ locationData('listings-single-page.html','images/listing-item-01.jpg',"Tom's Restaurant",'964 School Street, New York', '3.5', '12'), 40.94401669296697, -74.16938781738281, 1, '<i class="im im-icon-Chef-Hat"></i>'],

       ];

What I want to do is to pass location data from my model e.g.

  {% for model in query_list %}
[ locationData('link_to','img_url','{{ model.name }}','{{ model.address }}', '5', '10'), {{ model.latitude }}, {{ model.longitude }}, {{ forloop.counter }}, '{{ model.icon }}'],
  {% endfor %}

Possible solution:

Post the whole maps.js file in the template.html, inside the script tag. But this file has 10000+ lines.

`{% static 'base/scripts/maps.js %}` is missing a closing quote. But otherwise the maps.js is fine. What do you mean by it's not working? What do you expect to happen and what happens instead? You probably need to call some function, not just define a variable. — Alex Hall, Mar 23 '18 at 19:09
It's really not clear what you are asking here. You overwrite the value of `locations` inside `mainMap()`. If you didn't do that you would be able to access the value you defined in the HTML there. — Daniel Roseman, Mar 23 '18 at 19:18
@DanielRoseman `var locations` is defined after using a function `locationData()` which I also included in that small script, and removed both from `maps.js`. I expected those locations to show on the map, but now the map is empty. — GRS, Mar 23 '18 at 19:22
I still don't understand. Why can't you pass locations itself to locationData? — Daniel Roseman, Mar 23 '18 at 19:24
I don't understand either. In my head it makes sense that a globally defined variable should work. But for some reason it doesn't show anything (but when I move it inside the maps.js it works fine). I checked with different browser too. I thought it was because it was a function inside a function inside a function (maybe some javascript thing I don't know about) — GRS, Mar 23 '18 at 19:31
@DanielRoseman Are there any speed implications if I dump the 10,000 lines of ` — GRS, Mar 23 '18 at 19:35

score 0 · Answer 1 · edited Nov 06 '20 at 14:44

This is not an exact solution, but it is a trick to handle the situation.

views.py

def index(request):
    monthList = ['jan', 'feb', 'mar]
    activities = [1,2,3]
    model = {"name" : "Fine Guy" ]

    context = {
      'monthList' : monthList,
      'activities' : activities,
      'model' : model,
    }

    return render(request, 'index.html', context)

index.html

<!-- passing django values to external js -->
<!-- hided -->
<input type="text" id="monthList" style="display: none" value="{{ monthList|safe }}">
<input type="text" id="activities" style="display: none" value="{{ activities|safe }}">

<!-- for your question -->
<input type="text" id="modelname" style="display: none" value="{{ model.name|safe }}">

Here, I just pass the list of values monthList and activities from the django context to the rendered HTML file, and I hide that using (style="display:none")

|safe is for accurate value from the Python format to the Javacript format

Now, you can get the values in static/external.js using the tag Id from index.html

external.js

var monthList = document.getElementById("monthList").value;
var activities = document.getElementById("activities").value;

// for your question
var modelname = document.getElementById("modelname").value;

Passing data from Django views/template into the static javascript

1 Answers1