json to html table в php / javascript

Вот как вы можете это сделать в PHP:

 $json=file_get_contents("http://www.base.gov.pt/base2/rest/contratos?&sort(-publicationDate)"); $data = json_decode($json); //var_dump($data); echo "<table> <tr> <td><strong>Data de publicação</strong></td> <td><strong>Empresa Contratada</strong></td> <td><strong>Empresa que Contratou</strong></td> <td><strong>ID</strong></td> <td><strong>Objecto adquirido</strong></td> <td><strong>Preço Contratual</strong></td> <td><strong>Data do Contrato</strong></td> </tr>"; foreach($data as $object):?> <tr> <td><strong><?php echo $object->{'publicationDate'}?></strong></td> <td><strong><?php echo $object->{'contracted'}?></strong></td> <td><strong><?php echo $object->{'contracting'}?></strong></td> <td><strong><?php echo $object->{'id'}?></strong></td> <td><strong><?php echo $object->{'objectBriefDescription'}?></strong></td> <td><strong><?php echo $object->{'initialContractualPrice'}?></strong></td> <td><strong><?php echo $object->{'signingDate'}?></strong></td> </tr> <?php endforeach; echo "</table>"; ?> 

DEMO

Вот JSFiddle, который показывает, как печатать данные в вашем объекте:

http://jsfiddle.net/4PVr5/1/

И код:

HTML

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

JAVASCRIPT

 var object = { publicationDate: "28-02-2014", contracted: "Servicash - Equipamentos Electrónicos, Lda.", contracting: "Banco de Portugal", id: 994738, objectBriefDescription: "Consumíveis de papel para tratamento de dinheiro", initialContractualPrice: "12.945,50 €", signingDate: "28-02-2014" }; for (var prop in object) { // important check that this is objects own property // not from prototype prop inherited if(object.hasOwnProperty(prop)){ var td = document.createElement("td"); var strong = document.createElement("strong"); var text = document.createTextNode(prop + " - " + object[prop]); strong.appendChild(text); td.appendChild(strong); document.getElementById("table").appendChild(td); } } 

ИЗМЕНИТЬ ОБНОВЛЕНИЕ angus_thermopylae:

Я обновил JSFiddle, чтобы показать концепцию: http://jsfiddle.net/4PVr5/12/

Тогда у вас может быть столько свойств для объекта, который вы хотите, а только напечатать те, которые вы определили, и в том порядке, который вы определили. Вы просто добавляете текстовую строку, а затем получаете другую печать.

EDIT UPDATE: я обновил код, чтобы следить за заголовками таблицы. Теперь он добавляет их напрямую, а также обрабатывает объекты со слишком небольшим количеством свойств.

HTML

 <table id="table"> <thead> <th id="publicationDate"></th> <th id="contracted"></th> <th id="contracting"></th> <th id="id"></th> <th id="objectBriefDescription"></th> <th id="initialContractualPrice"></th> <th id="signingDate"></th> </thead> <tbody> </tbody> </table> 

JAVASCRIPT

 var orderedObject = { publicationDate: "28-02-2014", contracted: "Servicash - Equipamentos Electrónicos, Lda.", contracting: "Banco de Portugal", id: 994738, objectBriefDescription: "Consumíveis de papel para tratamento de dinheiro", initialContractualPrice: "12.945,50 €", signingDate: "28-02-2014" }; var unorderedObject = { id: 994738, objectBriefDescription: "Consumíveis de papel para tratamento de dinheiro", initialContractualPrice: "12.945,50 €", signingDate: "28-02-2014", publicationDate: "28-02-2014", contracted: "Servicash - Equipamentos Electrónicos, Lda.", contracting: "Banco de Portugal", }; var toManyPropertiesObject = { id: 994738, objectBriefDescription: "Consumíveis de papel para tratamento de dinheiro", initialContractualPrice: "12.945,50 €", signingDate: "28-02-2014", publicationDate: "28-02-2014", contracted: "Servicash - Equipamentos Electrónicos, Lda.", contracting: "Banco de Portugal", newProp: "ignored", newProp1: "ignored", newProp2: "ignored", }; var toFewPropertiesObject = { id: 994738, objectBriefDescription: "Consumíveis de papel para tratamento de dinheiro", initialContractualPrice: "12.945,50 €", contracted: "Servicash - Equipamentos Electrónicos, Lda.", contracting: "Banco de Portugal", }; printObjectInTable(orderedObject, "table"); printObjectInTable(unorderedObject, "table"); printObjectInTable(toManyPropertiesObject, "table"); printObjectInTable(toFewPropertiesObject, "table"); function printObjectInTable(objectToIterate, tableID) { var thChildren = document.getElementById(tableID).getElementsByTagName("th"), childrenLength = thChildren.length, tr = document.createElement("tr"); for (var i = 0; i < thChildren.length; i++) { var th = thChildren[i]; // important check that this is objects own property // not from prototype prop inherited var td = document.createElement("td"); if (objectToIterate.hasOwnProperty(th.id)) { td.appendChild(document.createTextNode(objectToIterate[th.id])); } tr.appendChild(td); } document.getElementById(tableID).getElementsByTagName("tbody")[0].appendChild(tr); } 

Преобразование каждой строки будет работать примерно так (низкий уровень и не делает ничего интересного):

 //with jdata as the object below { publicationDate: "28-02-2014", contracted: "Servicash - Equipamentos Electrónicos, Lda.", contracting: "Banco de Portugal", id: 994738, objectBriefDescription: "Consumíveis de papel para tratamento de dinheiro", initialContractualPrice: "12.945,50 €", signingDate: "28-02-2014" } function tablize(jdata) { var trow = "<tr>"; trow += "<td>"+jdata.publicationData+"</td>"; trow += "<td>"+jdata.contracted+"</td>"; trow += "<td>"+jdata.contracting+"</td>"; trow += "<td>"+jdata.id+"</td>"; trow += "<td>"+jdata.objectBriefDescription+"</td>"; trow += "<td>"+jdata.initialContractualPrice+"</td>"; trow += "<td>"+jdata.signingDate+"</td>"; trow += "</tr>" return trow; } 

Теперь ваша проблема попадает в таблицу. Предполагая, что у вас есть возможность настроить (слегка) структуру таблицы, я бы рекомендовал настроить таблицу следующим образом:

 <table> <thead> <tr> <th><strong>Data de publicação</strong></th> <th><strong>Empresa Contratada</strong></th> <th><strong>Empresa que Contratou</strong></th> <th><strong>ID</strong></th> <th><strong>Objecto adquirido</strong></th> <th><strong>Preço Contratual</strong></th> <th><strong>Data do Contrato</strong></th> </tr> </thead> <tbody id="cdata"></tbody> </table> 

Затем вам просто нужна функция для либо перебора всех данных, либо добавления накопленных строк, либо добавления вновь созданной строки к элементу:

Предполагая, что вы получите эти данные в виде массива:

 function fillTable(contractarray) { var tblrows = ""; if (contractarray) { for (var i=0;i<contractarray.length;i++) { tblrows += tablize(contractarray[i]); } } //appropriate method to set the table body--using jQuery for brevity $("#cdata").html(tblrows); } 

Если у вас нет возможности настроить таблицу html, вам придется «найти» таблицу в структуре DOM по-другому и либо воссоздать всю вещь (включая заголовки), либо отрегулировать ее, очистив / добавив строки соответствующим образом ,

В любом случае, функция tablize (jdata) будет работать, и вторая функция должна быть соответствующим образом скорректирована.

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

 var dataurl = "http://www.base.gov.pt/base2/rest/contratos?&sort(-publicationDate)"; $.getJSON(dataurl, function(data) { tablize(data)}); 

Это запускает запрос, передает данные функции tablize () и заполняет строки. Небольшой (но хороший) побочный эффект заключается в том, что если данные не возвращаются, таблица опустошается, показывая, что мы ничего не получили.

Подписывая свой ответ на комментарий, вы используете

 $('table#tbl TBODY').append( 

для добавления данных в таблицу,

Но вы должны использовать

 $('table#tbl').append( 

Другой код в порядке

Также вам нужно запустить свой код на веб-сервере.