Отображение всплывающей информации рядом с картой в таблице, когда я нажимаю на маркер с помощью leaflet/django

Я использую Leaflet JS и Django для создания картографического сайта. У меня маркеры на карте отображаются правильно, и я пытаюсь отобразить таблицу в отдельном div рядом с картой, отображающую информацию, которая должна быть во всплывающем окне.

Я также использую Django REST api для хранения данных о маркерах, таких как lat & long, имена и т.д. Мой api возвращает следующее:

[
    {
        "id": 2,
        "cube": "Industrial Cube North",
        "cubeurl": "https://dcwppntise010.edc.nam.gm.com/admin/login.jsp",
        "hostname": "acrptisepsn01",
        "domain": "nam",
        "personas": "Policy Service",
        "ip": "10.36.139.120",
        "structurename": "Rochester COMP",
        "streetaddress": "1000 Lexington Ave",
        "latitude": 43.18226,
        "longitude": -77.65599
    },

Я получаю данные из своего API следующим образом:

            {% for item in data %}
            var marker = L.marker([{{item.latitude}},{{item.longitude}}]).bindPopup("<strong>{{item.hostname}}</strong><br/>{{item.personas}}").addTo(map).on('popupopen', function (e) {
                    console.log(e.popup.getContent())
            });;
            {% endfor %}

Записывает содержимое в консоль, но не знаю, как динамически изменить информацию в таблице для каждого маркера (у них разная информация и расположение)

Я видел такие примеры, как: http://www.gistechsolutions.com/leaflet/DEMO/baseball/BaseballPanel.html

Там используется GeoJson, и я не уверен, как применить ту же логику к моей установке.

Спасибо!

EDIT - Я просмотрел функции click в Javascript, чтобы захватить информацию о всплывающем окне в переменные и вернуть ее, но в результате я получаю undefined, что наводит меня на мысль, что вы не можете сделать это с Django

Мне нужна таблица следующего вида: enter image description here

Вернуться на верх