How to use Django data in external JS script?

Question

JavaScript

Hello, in general, the situation is this, through views I pass data from the database to index.html in this format

<div class="image-floor">
        <h3>Этаж <span class="num-floor">01</span></h3>
        <svg width="433" height="408" viewBox="0 0 433 408" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <image id="image0" width="433" height="408" xlink:href="{% static 'img/flats.png' %}"></image>
                    <path id="p0" class="flats-path" d="M46.5 81V115.5H125V144.5H164V131H184.5V32.5H93V16H28V81H46.5Z" fill="#3595F6" fill-opacity="0.75"></path>
                    .......
        </svg>
      </div>

I need to read data from num-floor after executing a script on it

document.querySelector(".num-floor").textContent = counter.textContent

and find 10 apartments on a given floor (floor number + numbers 0-9), check whether they are reserved or not (according to data from the database) and if so, apply the 'flat-reserved' class to the corresponding path, I understand how to do this in JS , but I can’t figure out how to deliver data from the database there, in html I can call it like this

<div>
        {% for i in flats %}
        <h6>{{ i.id }}, {{ i.price }}, {{ i.reserved }}</h6>
        {% endfor %}
    </div>

But I don't know how to do it, please help me

Answer 1

Sergey Sergey Thanks, I made an API and through fetch + querySelector I do all the necessary manipulations with html, taking into account data from the database