使用JQuery在表中顯示JSON

Question

之前，單擊了一個按鈕，從Django視圖中檢索模板和上下文數據，並按如下所示進行渲染：

<tbody>
    {% for card_holder in card_holders %}
        <tr>
            <td>{{ card_holder.first_name }}</td>
            <td>{{ card_holder.last_name }}</td>
            <td>{{ card_holder.email }}</td>
            <td>{{ card_holder.cell_phone }}</td>
            <td>{{ card_holder.direct_tel }}</td>
            <td>{{ card_holder.status }}</td>

            {% if card_holder.slug %}
                <td><a target="_blank" href="{% url 'detail' slug=card_holder.slug %}">View Card</a></td>
            {% else %}
                <td>No slug available</td>
            {% endif %}

        </tr>
    {% endfor %}
</tbody>

我添加了一個視圖來檢索所有這些數據而不渲染頁面，並且響應如下所示：

[{
    "id": 18,
    "avatar": null,
    "first_name": "Walter",
    "last_name": "Kuselli",
    "title": "Actuary",
    "cell_phone": "+27768943437",
    "direct_tel": null,
    "email": "walter@walter.co.za",
    "website_url": null,
    "address": null,
    "linkedin_url": null,
    "facebook_url": null,
    "twitter_url": null,
    "instagram_url": null,
    "pinterest_url": null,
    "status": "demo",
    "slug": "57139752478236",
    "name_font_size": 20,
    "title_font_size": 15,
    "email_font_size": 15,
    "address_font_size": 15,
    "created_at": "2019-02-20T17:38:43.261441",
    "updated_at": "2019-02-20T17:38:43.261508",
    "import_id": null,
    "send_id": false,
    "next_renewal_date": "2020-02-20T17:54:05.554508",
    "paid_id": true,
    "transaction_id": 17,
    "branch": 3,
    "user": 19
},
{
    "id": 19,
    "avatar": null,
    "first_name": "Wally Kuselli",
    "last_name": "Kusellli",
    "title": "Actuary",
    "cell_phone": "+27788949437",
    "direct_tel": null,
    "email": "walter@walter.co.za",
    "website_url": null,
    "address": null,
    "linkedin_url": null,
    "facebook_url": null,
    "twitter_url": null,
    "instagram_url": null,
    "pinterest_url": null,
    "status": "demo",
    "slug": "3838834981253446",
    "name_font_size": 20,
    "title_font_size": 15,
    "email_font_size": 15,
    "address_font_size": 15,
    "created_at": "2019-02-20T17:38:50.032723",
    "updated_at": "2019-02-20T17:38:50.032791",
    "import_id": null,
    "send_id": false,
    "next_renewal_date": null,
    "paid_id": false,
    "transaction_id": null,
    "branch": 3,
    "user": 20
}]

在這樣的表中顯示JSON的最佳方法是什么？ 我已經看到了這樣的答案：

$.getJSON("http://10.0.2.2:8080/v1/service/1",
    function (data) {
    $.each(data, function (key, val) {
        var tr = $('<tr></tr>');
        $.each(val, function (k, v) {
            $('<td>' + v + '</td>').appendTo(tr);
        });
        tr.appendTo('#display');
    });
});

但這假設響應如下所示：

data = {
    "key_one": "value_one",
    "key_two": "value_two",
    "key_three": "value_three"
}

Answer 1

參見下面的實現。 有用。

 data = [{ "id": 18, "avatar": null, "first_name": "Walter", "last_name": "Kuselli", "title": "Actuary", "cell_phone": "+27768943437", "direct_tel": null, "email": "walter@walter.co.za", "website_url": null, "address": null, "linkedin_url": null, "facebook_url": null, "twitter_url": null, "instagram_url": null, "pinterest_url": null, "status": "demo", "slug": "57139752478236", "name_font_size": 20, "title_font_size": 15, "email_font_size": 15, "address_font_size": 15, "created_at": "2019-02-20T17:38:43.261441", "updated_at": "2019-02-20T17:38:43.261508", "import_id": null, "send_id": false, "next_renewal_date": "2020-02-20T17:54:05.554508", "paid_id": true, "transaction_id": 17, "branch": 3, "user": 19 }, { "id": 19, "avatar": null, "first_name": "Wally Kuselli", "last_name": "Kusellli", "title": "Actuary", "cell_phone": "+27788949437", "direct_tel": null, "email": "walter@walter.co.za", "website_url": null, "address": null, "linkedin_url": null, "facebook_url": null, "twitter_url": null, "instagram_url": null, "pinterest_url": null, "status": "demo", "slug": "3838834981253446", "name_font_size": 20, "title_font_size": 15, "email_font_size": 15, "address_font_size": 15, "created_at": "2019-02-20T17:38:50.032723", "updated_at": "2019-02-20T17:38:50.032791", "import_id": null, "send_id": false, "next_renewal_date": null, "paid_id": false, "transaction_id": null, "branch": 3, "user": 20 } ] var draw = function(data) { $.each(data, function(key, val) { var tr = $('<tr></tr>'); $.each(val, function(k, v) { $('<td>' + v + '</td>').appendTo(tr); }); tr.appendTo('#display'); }); } draw(data) 

 td { border: 1px solid black; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <table id="display"> </table>