JSON到HTML表中的PHP/JavaScript的

Question

我有一个JSON文件是这样的：

{ 
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" 
}, 

我需要证明它在这样的桌子：

<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> 
</table> 

我如何做到这一点在PHP或JavaScript？

非常感谢你的人;）

Answer 1

这里是你如何在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

Answer 2

这里是一个的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/

然后你可以在对象上尽可能多的属性，你想，但只按照您定义的顺序打印您定义的内容。你只需添加一个文本字符串，然后你有另一个打印。

编辑更新： 我更新了代码以遵循表头。现在它直接添加它们，并处理属性太少的对象。

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); 
} 

Answer 3

在每一行的转换将工作是这样的（较低水平，没有做任何幻想）：

//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）函数都可以工作，第二个函数需要相应地调整。

要完全将其（与请求者提供的URL：

var dataurl = "http://www.base.gov.pt/base2/rest/contratos?&sort(-publicationDate)"; 

$.getJSON(dataurl, function(data) { tablize(data)}); 

即序幕的请求时，数据传递给tablize（）函数，并且填充列A小的（但良好。 ）副作用是，如果没有数据返回，桌子清空，表明我们得到了什么回来

Answer 4

Accoding对评论你的答案，您正在使用

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

用于追加数据到表

，

但是，你应该使用

$('table#tbl').append(

其他代码是罚款

另外你ha已经将您的代码运行到Web服务器。