Проблема с разбором JSON-ответа в HTMX

У меня есть страница, которая отправляет некоторые данные в Django back-end и возвращает ответ JSON. У меня есть проблема с разбором этого ответа с помощью шаблонов. Любая помощь будет оценена по достоинству. Заранее спасибо.

    <div class="card-body">
            <form>
            {% csrf_token %}
                <div class="input-group mb-3">
                    <label class="input-group-text">Command</label>
                    <select class="form-select" name="run_show_command" id="run_show_command">
                        <option selected disabled>Choose...</option>
                        <option value="{{ data.version.id }}:1">show ip interface brief</option>
                        <option value="{{ data.version.id }}:2">show interfaces description</option>
                        <option value="{{ data.version.id }}:3">show ip arp</option>
                        <option value="{{ data.version.id }}:4">show ip route</option>
                        <option value="{{ data.version.id }}:5">show ip cef</option>
                        <option value="{{ data.version.id }}:6">show version</option>
                    </select>
                    <button type="submit" class="btn btn-sm btn-success" hx-post="{% url 'inventory:device_run_command' %}" hx-target="#command_output" mustache-template="m_template" hx-indicator="#loader_bars">
                        <i class="fas fa-terminal"></i> Run
                    </button>
                </div>
            </form>
            <div class="d-flex justify-content-center" hx-ext="client-side-templates" id="command_output">
                <img id="loader_bars" class="htmx-indicator" alt="Loading..." src="{% static 'images/loaders/bars.svg' %}"/>
                <template id="m_template" type="text/mustache">
                    {% for data in dataset %}
                    {% for key, value in data.items %}
                        <li>{{ key }} {{ value }}</li>
                    {% endfor %}
                    {% endfor %}
                </template>
            </div>
        </div>

JSON:

 [{ "intf": "GigabitEthernet1", "ipaddr": "10.10.20.48", "status": "up", "proto": "up" }, { "intf": "GigabitEthernet2", "ipaddr": "unassigned", "status": "administratively down", "proto": "down" }, { "intf": "GigabitEthernet3", "ipaddr": "unassigned", "status": "administratively down", "proto": "down" }, { "intf": "Loopback1", "ipaddr": "10.10.10.100", "status": "up", "proto": "up" }, { "intf": "Loopback123", "ipaddr": "unassigned", "status": "up", "proto": "up" }, { "intf": "Loopback510", "ipaddr": "50.10.10.10", "status": "up", "proto": "up" }, { "intf": "Loopback511", "ipaddr": "51.10.10.10", "status": "up", "proto": "up" }, { "intf": "Loopback512", "ipaddr": "52.10.10.10", "status": "up", "proto": "up" }, { "intf": "Loopback666", "ipaddr": "6.6.6.6", "status": "up", "proto": "up" } ]

Вы не можете использовать шаблоны Django на фронтенде, как вы пытались сделать в теге <template>. HTMX поддерживает 3 библиотеки шаблонов javascript: mustache.js, handlebars и nunjucks. Наиболее близким к Django является nunjucks, который вдохновлен Jinja2, который вдохновлен Django Templates, так что он будет более или менее знаком.

Сначала не забудьте добавить расширение HTMX и библиотеку nunjucks в ваш JS бандл, или непосредственно в базовый HTML шаблон, например:

<script src="https://unpkg.com/htmx.org@1.6.1"></script>
<script src="https://unpkg.com/htmx.org@1.6.1/dist/ext/client-side-templates.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nunjucks/3.0.1/nunjucks.min.js"
   integrity="sha512-IIuR+Zp8wvP0dxNcSsRPoL7SXzP1kGmosDtcU7f6cPObZ9F5Ze/icFSRH/SqigP468jGwDm2XOE0/gSGm/cTBw=="
   crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Обновленный шаблон:

<div class="card-body">
  <form>
    {% csrf_token %}
    <div class="input-group mb-3" hx-ext="client-side-templates">
      <label class="input-group-text">Command</label>
      <select class="form-select" name="run_show_command" id="run_show_command">
        <option selected disabled>Choose...</option>
        <option value="{{ data.version.id }}:1">show ip interface brief</option>
        <option value="{{ data.version.id }}:2">show interfaces description</option>
        <option value="{{ data.version.id }}:3">show ip arp</option>
        <option value="{{ data.version.id }}:4">show ip route</option>
        <option value="{{ data.version.id }}:5">show ip cef</option>
        <option value="{{ data.version.id }}:6">show version</option>
      </select>
      <button type="submit" class="btn btn-sm btn-success" hx-post="{% url 'inventory:device_run_command' %}"
        hx-target="#command_output" nunjucks-template="m_template" hx-indicator="#loader_bars">
        <i class="fas fa-terminal"></i> Run
      </button>
    </div>
  </form>
  <div class="d-flex justify-content-center">
    <div id="command_output">
      <img id="loader_bars" class="htmx-indicator" alt="Loading..." src="{% static 'images/loaders/bars.svg' %}" />
    </div>
    <template id="m_template">
      <ul>
        {% for item in items %}
        {% for key, value in item %}
        <li>{{ key }} {{ value }}</li>
        {% endfor %}
        {% endfor %}
      </ul>
    </template>
  </div>
</div>

Обратите внимание, что я перенес атрибут hx-ext на родительский div кнопки, иначе она не будет работать. Nunjucks имеет довольно подобный синтаксис, но, например, нам не нужно добавлять .items во вложенном цикле.

Кроме того, вам необходимо иметь ключ верхнего уровня в вашем JSON файле, который будет ключом в первом цикле for.

{
    "items": [
        {
            "intf": "GigabitEthernet1",
            "ipaddr": "10.10.20.48",
            "status": "up",
            "proto": "up"
        },
        {
            "intf": "GigabitEthernet2",
            "ipaddr": "unassigned",
            "status": "administratively down",
            "proto": "down"
        },
    ]
}
Вернуться на верх