Блог

Главная - Вопросы по программированию - Отображение JSON в таблице с помощью jQuery

Отображение JSON в таблице с помощью jQuery

#javascript #jquery

#javascript #jquery

Вопрос:

Ранее была нажата кнопка, извлекающая шаблон и контекстные данные из представления 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"
}

Комментарии:

1. Опубликованный вами код не принимает этот формат. Это вложенный цикл, он предполагает, что это массив подобных объектов. data = [{...}, {...}]

2. Первый $.each обрабатывает массив, второй обрабатывает свойства объекта.

3. Итак, тот же самый блок кода должен более или менее соответствовать тому, что мне нужно?

4. Только если вы хотите отобразить все свойства в каждом объекте. Если вы более избирательны, просто используйте свой шаблон Django.

Ответ №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>