PHP Lang
  1. PHP Lang
  3. Преобразование json-данных в таблицу HTML
Intereting Posts
«Если» с назначением является хорошей практикой? Платежи PayPal нескольким получателям. Адаптивные платежи? Можно ли остановить включение php-файла? Stripe – ошибка PHP – Stripe больше не поддерживает запросы API, сделанные с помощью TLS 1.0 phpexcel – использование его с помощью шаблона excel (диаграмма отсутствует) php PHP – ошибка при использовании socket_recv создание пользователей moodle и их программное программирование Добавление данных в среднюю строку / строку csv вместо последней строки или строки Zend_Framework- Где разместить обработку $ _GET и $ _POST (HTTP Request)? Сортировка объекта (SimpleXMLElement) php Хотите создать динамический субдомен в codeigniter? Устаревший: функция eregi () устарела в Доктрина Symfony Многие для многих вставляют PHP-эквивалент javascript >>> shift right с нулевыми заполняющими побитовыми операторами? Не удается получить данные в флот с помощью AJAX

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

У меня есть массив данных в 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-х элементов (показано в индексе сравненияValues ​​массива)

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

 <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 и отобразить клиентскую часть таблицы.

Любые изящные предложения?

Заранее спасибо.

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

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

  2. Сколько CPU и памяти вы хотите тратить на веб-браузер? Генерация таблицы в дереве 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)); }); });

dnaluz,

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

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

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

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

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

Добро пожаловать в Stack Overflow.

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