Преобразование данных 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 предметов (как показано в индексе comparisonValues ​​массива)

В конце концов мне нужно строку, чтобы выглядеть подобно этому

<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

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

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

Answer 2

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

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

Answer 3

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

1. Сколько трафика и пропускной способности сети вы хотите тратить на веб-сервере? Генерация и отправка HTML-файлов больше, чем просто отправка компактной строки JSON.

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

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

До сих пор я предлагаю вернуть JSON и иметь JS/jQuery для заполнения его на стороне клиента.

---

Update: при условии, что данные 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 4

dnaluz,

, как уже отмечалось другими, есть большие ЛИЭС там делать thios стороне клиента. Я бы также согласился с тем, что вам лучше всего отправить json-массив клиенту, а затем использовать lib для представления данных в табличном формате.

Altho я упомянуть использование хороших презентаций LIBS для создания таблицы, ниже немного функция, я использую для легких быстрых и грязных столов визуализаций из массива 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; 
} 

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

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