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

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.

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.

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!

I know its kinda late but for future reference, for those who don't want solely rely on AI. I've solve mine by doing this on the script tag:

const contextName = `{{ contextName }}`;
console.log(contextName);

I hope this help.