Как использовать данные с Django в внешнем JS скрипте?

Question

[Held6991]

Здравствуйте, в целом ситуация такая, через views передаю в index.html данные из БД в таком формате

<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>

Мне нужно считать данные из num-floor после выполнения скрипта над ним

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

и найти 10 квартир на данном этаже (№ этажа + цифры 0-9), проверить зарезервированы они или нет (по данным из БД) и если да, то применить к соответствующему path класс 'flat-reserved', понимаю как это сделать в JS, но как туда доставить данные из БД никак не могу понять, в html я могу их вызвать вот так

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

Но никак не соображу, каким образом это сделать, подскажите пожалуйста

Comments

[Сергей Сергей]

Если через шаблоны внутри <path> сразу задавать стиль?

[Held6991]

Сергей Сергей, чтобы так сделать, мне нужно получить номер этажа, который изменяется в JS скрипте

[Сергей Сергей]

Так на сервере заполнять все этажи, а на клиенте переключать видимость этажей.

[Held6991]

Сергей Сергей, можно немного подробнее, ибо немного не понимаю, как это реализовать. Или какие-то материалы по этому поводу? Посмотрите, пожалуйста структуру сайта https://github.com/Comeodore/melodyjk

[Сергей Сергей]

Понятно, одностраничник.

Я не знаю как, но я знаю точно, что Django может выдавать данные в json-формате. И вместо заполнения какого-то элемента на странице текстом со статусами квартир лучше организовать мааааленькое API.

Когда выбран этаж, производится запрос, что-то типа fetch( '/api/getflats?floor=3' ).json(), по его результатам через процедуру с циклом "пройтись по квартирам"

querySelector( '.flats-path' ).forEach( ( fp, i ) => fp.classList.toggle( 'reserved', result[ i ].reserved ) )

.

Все непонятные слова и конструкции легко ищутся поисковиками.

Answer 1

[Held6991]

Сергей Сергей Спасибо, сделал API и через fetch + querySelector делаю все нужные манипуляции с html с учетом данных с БД