0

Django バックエンドにデータを投稿するページがあり、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" } ]
4

1 に答える 1