Use django variables passed as context in script tag (JS) of HTML file

Question

I am stuck using <script> tags to render a googlemaps api window in my django webapp. In my views I passed my data as such:

def map_view(request):
    context = {
        'title': 'My Map',
        'machines': Machine.objects.all(),
    }

    return render(request, 'gui/map_view.html', context)

I simply want to leverage some parameters contained in the Machine objects (strings) to automate generation of Markers on the map, but can't figure out how to use machines in the javascript code. Tried both {{ }} and {% %}

`machines` is a collection of `Machine` objects, you can not "automagically" turn it in something JavaScript understands. — Willem Van Onsem, May 11 '20 at 20:03
Can you show exactly how you want to transform these `Machine` objects in something a Google Maps API will find useful? — Willem Van Onsem, May 11 '20 at 20:04
Just want to use some parameters from the machine object, strings and ints to use in the InfoWindow — J.C, May 11 '20 at 20:07
Also I got longitude and latitude as Machine's parameters, would like to use those to auto generate more Marker objects in JS — J.C, May 11 '20 at 20:09

score 0 · Answer 1 · answered May 11 '20 at 20:47

0

If I understand you correctly, then you are trying to get the location data stored in every machine into some sort of JavaScript collection.

The way you are doing it now probably requires a template somewhat like this

<script>
  var machines = [ // define list with machine positions
  {% for machine in machines %} // use django templates to interact with the passed context
    machine.position, // I don't know what your Machine class looks like, but you get the idea
  {% endfor %}
  ];
</script>

Read about the template language here

I suspect this is not the best way to achieve this. Maybe try generating the list as a string in python and passing that in the context instead.

answered May 11 '20 at 20:47

JonasUJ

108
1
6

This is what I would want to be able to do, but it doesn't work on my side. Looking for a workaround – J.C May 11 '20 at 21:01
"Doesn't work" is a little vague. Are you getting any errors? Is it generating the list with the wrong syntax? Is the generated list empty? – JonasUJ May 11 '20 at 21:04
The code doesn't compile, but even it it did, the variable `machines` inside the for loop does not exists. – J.C May 12 '20 at 15:28

score 0 · Answer 2 · answered May 11 '20 at 20:54

I am still learning, so I hope this help you, I had a django project in which I had a webpage that displayed a list of movies, this was the views.py code:

def movies_list(request):
    movies = Movie.objects.all().order_by('pk')
    return render(request, 'movies/movies_list.html', {'movies':movies, 'title':'Movie List'})

The HTML part is like this:

{% extends 'base_layout.html' %}
{% block content %}
    <div class="container">
        <div class="row">
            {% for movie in movies %}
            <a href="{% url 'movie_detail' pk=movie.pk %}" >
                <div class="col cell"><img src="{{ movie.movie_poster.url }}"></div>
            </a>
            {% endfor %}

        </div>

    </div>
{% endblock %}

So I passed two parameters to the html 1 the page title, and the second the movies object, and I can use it's fields.

Yes, this isn't a problem for me. My issue is that to create the GoogleMap feature in my webapp, I need to write Javascript code. And would need to use my {{ data }} in JS, but I cannot directly — J.C, May 11 '20 at 20:58
check this out: https://stackoverflow.com/questions/298772/django-template-variables-and-javascript — Daniel Ben-Shabtay, May 11 '20 at 21:04

score 0 · Answer 3 · answered May 11 '20 at 22:04

A handy trick I've used over the years... in your view:

from json import dumps

def map_view(request):
    context = {
        'title': 'My Map',
        'machines': dumps(Machine.objects.all()),
    }

    return render(request, 'gui/map_view.html', context)

Then in your template, in JavaScript:

<script>
var machines = {{ machines }}

console.log(machines)
</script>

Good luck!

Use django variables passed as context in script tag (JS) of HTML file

3 Answers3