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>

使用JQuery在表中显示JSON

1 个答案: