Преобразование данных JSON в таблицу HTML

Question

У меня есть массив данных в php, и мне нужно отобразить эти данные в таблице HTML. Вот как выглядит пример набора данных.

Array(
  Array
  (
     [comparisonFeatureId] => 1182
     [comparisonFeatureType] => Category
     [comparisonValues] => Array
                 (
                 [0] => Not Available
                 [1] => Standard
                 [2] => Not Available
                 [3] => Not Available
                 )
    [featureDescription] => Rear Seat Heat Ducts
),)

Набор данных представляет собой сравнение 3 элементов (показано в индексе сравнения значений массива)

В конце концов мне нужен ряд, похожий на этот

<tr class="alt2 section_1"> 
   <td><strong>$record['featureDescription']</strong></td> 
   <td>$record['comparisonValues'][0]</td> 
   <td>$record['comparisonValues'][1]</td> 
   <td>$record['comparisonValues'][2]</td> 
   <td>$record['comparisonValues'][3]</td> 
</tr>   

Проблема, с которой я сталкиваюсь, заключается в том, как лучше всего это сделать. Должен ли я создать всю таблицу HTML на стороне сервера, передать ее через ajax-вызов и просто сбросить предварительно обработанные данные HTML в div или передать данные json и отобразить таблицу на стороне клиента.

Какие-нибудь изящные предложения?

Answer 1

Это зависит. Есть несколько факторов, которые необходимо учитывать:

1. Какую пропускную способность ЦП и сети вы хотите использовать на веб-сервере? Генерация и отправка HTML - это больше, чем просто отправка компактной строки JSON.

2. Сколько ЦП и памяти вы хотите тратить на веб-браузере? Генерация таблицы в дереве HTML DOM пожирает больше, чем просто вставка сгенерированной строки как innerHTML.

3. Насколько многократно вы хотите использовать веб-сервис? Возвращать «статический» HTML не всем полезно. Более гибкий формат, такой как XML или JSON, более полезен (также для себя в будущем).

На данный момент я бы предложил вернуть JSON и иметь JS / jQuery для его заполнения на стороне клиента.

---

Обновление: при условии, что данные JSON будут поступать в этом формате

var json = {"features": [{
    "comparisonFeatureId": 1182,
    "comparisonFeatureType": "Category",
    "comparisonValues": [ "Not Available", "Standard", "Not Available", "Not Available" ],
    "featureDescription": "Rear Seat Heat Ducts"
}, {
    "comparisonFeatureId": 1183,
    "comparisonFeatureType": "Category",
    "comparisonValues": [ "Not Available", "Standard", "Not Available", "Not Available" ],
    "featureDescription": "Some Description"
}]};

и что у вас есть такая пустая таблица

<table id="table"></table>

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

$.each(json.features, function(i, feature) {
    var row = $('<tr class="alt2 section_1">').appendTo($('#table'));
    row.append($('<td>').append($('<strong>').text(feature.featureDescription)));
    $.each(feature.comparisonValues, function(j, comparisonValue) {
        row.append($('<td>').text(comparisonValue));
    });
});

Answer 2

dnaluz,

, как уже упоминалось другими, есть великие люди, которые занимаются этим на стороне клиента.Я бы также высказал мнение, что вам лучше всего отправить массив json клиенту, а затем использовать библиотеку lib для представления данных в табличном формате.

Хотя я упоминаю использование хороших библиотек презентаций для созданияВ таблице ниже приведена небольшая функция, которую я использую для облегченной быстрой и грязной визуализации таблиц из массива json:

function CreateTableFromJson(objArray) {
    // has passed in array has already been deserialized
    var array = typeof  objArray != 'object' ? JSON.parse(objArray) : objArray;

    str = '<table class="tableNormal">';
    str += '<tr>';
    for (var index in array[0]) {
        str += '<th scope="col">' + index + '</th>';
    }
    str += '</tr>';
    str += '<tbody>';
    for (var i = 0; i < array.length; i++) {
        str += (i % 2 == 0) ? '<tr class="alt">' : '<tr>';
        for (var index in array[i]) {
            str += '<td>' + array[i][index] + '</td>';
        }
        str += '</tr>';
    }
    str += '</tbody>'
    str += '</table>';
    return str;
}

надеюсь, что это полезно каким-то незначительным образом .. jim

[править] - вот ссылка на страницу с использованием очень похожей техники: http://www.zachhunter.com/2010/04/json-objects-to-html-table/

Answer 3

Приятная вещь при отправке в формате JSON заключается в том, что вы удаляете слой представления со слоя данных.Я бы сделал таблицу клиентской стороны - есть библиотеки и учебные пособия по блогам для обработки рендеринга.

Если у вас есть средства, extJS - довольно простой способ добиться этого.

Answer 4

Добро пожаловать в переполнение стека.

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