Создать таблицу из ответа JSON

Question

Создать таблицу из ответа JSON

0

У меня есть ответ JSON, что-то вроде следующего:

[
    [
        "hospital_name",
        "Average Covered Charges",
        "Average Total Payments",
        "Total Discharges"
    ],
    [
        "MERCY REGIONAL HEALTH CENTER",
        6888.8181818182,
        2890.5454545454,
        11
    ],
    [
        "BUTLER MEMORIAL HOSPITAL",
        13699.818181818,
        2934.5454545454,
        11
    ],
    [
        "METHODIST MANSFIELD MEDICAL CENTER",
        23913.909090909,
        2964.8181818182,
        11
    ],
    [
        "EMORY JOHNS CREEK HOSPITAL",
        10976.727272727,
        2993.5454545454,
        11
    ]
]

и я пытаюсь сделать что-то вроде этого:

     success:(function(data) {
                            jQuery.each(data, function(key, value) {
                                jQuery('table[name=drg_table]')
                                .append(
                                jQuery('<td>').text(key[0]),
                                jQuery('<td>').text(key[1]),
                                jQuery('<td>').text(key[2])
                            ); 
                            });
                        }

Но я не уверен, что это правильный способ обновить мою таблицу (которая уже существует). Я просто хочу обновить целую таблицу новыми значениями.

temp-learn 19 дек. 2013, в 15:37

Источник

Теги:

javascript

jquery

html

json

3 ответа

1

Недавно я недавно услышал о специальном плагине для отображения JSON в виде красивых таблиц под названием "dynatable": http://dailyjs.com/2013/12/17/frontend-roundup/

Вы можете посмотреть.

Offirmo 19 дек. 2013, в 13:04

0

Выглядит неплохо, но примеров на странице на данный момент очень мало.
temp-learn 19 дек. 2013, в 14:27
0

Вы можете связать любую скрипку для этого?
temp-learn 19 дек. 2013, в 14:39
0

Вот основной jsfiddle: jsfiddle.net/ty3b7 . Хотя вы, возможно, захотите ознакомиться с разделом AJAX документации, поскольку есть лучший способ подключить dynatable к конечной точке AJAX JSON: dynatable.com/#json-from-ajax .
jangosteve 04 янв. 2014, в 09:41

Показать ещё 1 комментарий

1

У вас уже есть таблица с идентификатором #records_table, поэтому

Пытаться,

jQuery('#records_table tr').remove(); //To clear the rows (pointed by @nunners)

jQuery.each(data, function(key, value) {
 jQuery('#records_table')
 .append('<tr><td>' + value[0] 
  + '</td><td>' + value[1] 
  + '</td><td>' + value[2] 
  + '</td><td>' + value[3] 
  + '</td></tr>');
});

Я думаю, что вы обновили свой вопрос с помощью нового селектора, поэтому измените свой селектор как,

jQuery('table[name=drg_table]') в приведенном выше коде.

DEMO

Rajaprabhu Aravindasamy 19 дек. 2013, в 11:29

1

Поскольку он хочет update whole table with new values , было бы неплохо также включить jQuery('#records_table tr').remove();
Nunners 19 дек. 2013, в 14:10
0

@Nunners: Очень круто, это то, о чем я тоже говорил.
temp-learn 19 дек. 2013, в 14:12
0

Я не удалил это, я просто удалил комментарий, но я понял вашу точку зрения. Здесь есть небольшая проблема, создаются новые строки, но данные, которые я получаю как положенные, являются «неопределенными». РЕДАКТИРОВАТЬ: я получил его вместо ключа [(некоторый индекс)], мне нужно было сделать значение [(некоторый индекс)]
temp-learn 19 дек. 2013, в 14:16
0

@ temp-learn Скажите, как вы хотите отображать эти данные?
Rajaprabhu Aravindasamy 19 дек. 2013, в 14:19
0

Элементы td как дочерние элементы table недопустимы в HTML - посмотрите на разрешенного родителя по этой ссылке developer.mozilla.org/en-US/docs/Web/HTML/Element/td
ᾠῗᵲᄐᶌ 19 дек. 2013, в 14:21
0

@ ᾠῗᵲ ᄐ ᶌ: да, нужно быть в правильном родительско-родительском отношении, поэтому я проголосовал за этот пост, а за ваш пост голосование
temp-learn 19 дек. 2013, в 14:23

Показать ещё 4 комментария

Ещё вопросы

Выглядит неплохо, но примеров на странице на данный момент очень мало.
Вы можете связать любую скрипку для этого?
Вот основной jsfiddle: jsfiddle.net/ty3b7 . Хотя вы, возможно, захотите ознакомиться с разделом AJAX документации, поскольку есть лучший способ подключить dynatable к конечной точке AJAX JSON: dynatable.com/#json-from-ajax .
Поскольку он хочет update whole table with new values , было бы неплохо также включить jQuery('#records_table tr').remove();
@Nunners: Очень круто, это то, о чем я тоже говорил.
Я не удалил это, я просто удалил комментарий, но я понял вашу точку зрения. Здесь есть небольшая проблема, создаются новые строки, но данные, которые я получаю как положенные, являются «неопределенными». РЕДАКТИРОВАТЬ: я получил его вместо ключа [(некоторый индекс)], мне нужно было сделать значение [(некоторый индекс)]
@ temp-learn Скажите, как вы хотите отображать эти данные?
Элементы td как дочерние элементы table недопустимы в HTML - посмотрите на разрешенного родителя по этой ссылке developer.mozilla.org/en-US/docs/Web/HTML/Element/td
@ ᾠῗᵲ ᄐ ᶌ: да, нужно быть в правильном родительско-родительском отношении, поэтому я проголосовал за этот пост, а за ваш пост голосование

ᾠῗᵲᄐᶌ · Accepted Answer · 2013-12-19T12-35-00.000Z

Первое: вы не можете иметь <td> элементов в качестве дочерних элементов <table> - вы, вероятно, хотите добавить к <tbody> и обернуть <td> в <tr>

Второй - аргумент value содержит массив, а не key key - фактически индекс

Вы можете создать такую строку, а затем добавить в свой html после того, как будет создана полная строка элементов

var str = '';
jQuery.each(data, function (key, value) {
    str += '<tr><td>' + value[0] + '</td>'
        + '<td>' + value[1] + '</td>'
        + '<td>' + value[2] + '</td>'
        + '<td>' + value[3] + '</td></tr>';
});
jQuery('table[name=drg_table] tbody').html(str);

FIDDLE