將json轉換爲html

我試圖在我的頁面中添加一篇新聞文章，並且已經給出了一個json文件的鏈接。我想將json文件中的數據轉換爲html。下面我列出了json結構的樣子（它將在外部服務器上的json文件中，但爲了簡單起見，我在這裏包含了一個片段）。我想要將json文件中的數據轉換爲html，如下面的表格結構。我試圖用jQuery來實現這一點（JSON2HTML - http://json2html.com/），但無法弄清楚。任何幫助將不勝感激！將json轉換爲html

<table> 
    <tr class="header"> 
    <td colspan="2">name from company</td> 
    <td class="alignR">page 1 of total pages (total from hits)</td> 
    </tr> 
    <tr> 
     <td class="colOne">Here I want the publishedAt data</td> 
     <td class="colTwo">Here I want the summary data</td> 
     <td class="colThree">Here I want the source data</td> 
    </tr> 
    <tr class="footer"> 
    <td colspan="3">(list pages) <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> <a href="#">8</a> <a href="#">9</a> <a href="#">10</a> <a href="#">Next</a></td> 
    </tr> 
</table> 


{ 
    "company":{ 
     "registrationNumber":1234567890, 
     "name":"Lorem Ipsum Name" 
    }, 
    "search":{ 
     "from":"2012-08-19", 
     "to":"2012-09-18", 
     "languages":"eng", 
     "mediaChannels":"web,print" 
    }, 
    "hits":{ 
     "page":1, 
     "perPage":20, 
     "total":123, 
     "articles":[ 
     { 
      "id":1111111111, 
      "title":"Lorem Ipsum title 1", 
      "publishedAt":"2012-09-04T14:30:09+02:00", 
      "summary":"Lorem ipsum dolor sit amet 1", 
      "source":{ 
       "id":12111, 
       "name":"the source name" 
      }, 
      "url":"http://myurl.com/articles/1535585834", 
      "openAccessUrl":"http://myurl.com/open_access/d4f2a56a6dc1da563f90/articles/1535585834-f2b64530e4c6be0a2321d57b4870dd7a3f8952df" 
     }, 
     { 
      "id":2222222222, 
      "title":"Lorem Ipsum title 2", 
      "publishedAt":"2012-09-05T14:30:09+02:00", 
      "summary":"Lorem ipsum dolor sit amet 1", 
      "source":{ 
       "id":12121, 
       "name":"the source name" 
      }, 
      "url":"http://myurl.com/articles/1535585834", 
      "openAccessUrl":"http://myurl.com/open_access/d4f2a56a6dc1da563f90/articles/1535585834-f2b64530e4c6be0a2321d57b4870dd7a3f8952df" 
     }, 
     { 
      "id":3333333333, 
      "title":"Lorem Ipsum title 3", 
      "publishedAt":"2012-09-06T14:30:09+02:00", 
      "summary":"Lorem ipsum dolor sit amet 1", 
      "source":{ 
       "id":12345, 
       "name":"the source name" 
      }, 
      "url":"http://myurl.com/articles/1535585834", 
      "openAccessUrl":"http://myurl.com/open_access/d4f2a56a6dc1da563f90/articles/1535585834-f2b64530e4c6be0a2321d57b4870dd7a3f8952df" 
     }, 
     ] 
    } 
}

來源

2012-09-19 user1425385

幾乎所有的JS模板引擎都這麼做 - 將一些JSON數據填充到文本（HTML）模板中。你可能想看看在衆多選項，包括jQuery templates，jsRender，mustache，handlebars.js，dust.js等（排名不分先後）

JSON2HTML但有一點不同，它沒有一個文本模板，但而是使用對象的映射從JSON數據對象樹創建HTML對象樹。無論採用哪種方式，您都需要一個模板（使用傳統文本模板時）或映射（使用JSON2HTML時）來產生任何有意義的結果。

來源

2012-09-19 09:11:20 Lucero

想我會回答有關如何使用json2html做到這一點這個問題，儘管這是一個小老頭

要顯示下面的模板可以用相應的文章：

var map_article = {"tag":"tr","children":[ 
    {"tag":"td","class":"colOne","html":"${publishedAt}"}, 
    {"tag":"td","class":"colTwo","html":"${summary}"}, 
    {"tag":"td","class":"colThree","html":"${source.id} : ${source.name}"} 
]}; 

$('#table').json2html(data.hits.articles,article);

到包裝到這一張桌子，你會這樣做：

var map_table = {"tag":"table","children":[ 
{"tag":"tbody","children":[ 
    {"tag":"tr","class":"header","children":[ 
     {"tag":"td","colspan":"2","html":"${company.name}"}, 
     {"tag":"td","class":"alignR","html":"page 1 of ${hits.total}"} 
     ]} 
    ]}, 
{"tag":"tbody","children":function(){$.json2html(this.hits.articles,map_article);}}, 
{"tag":"tbody","children":[ 
    {"tag":"tr","class":"footer","children":[ 
     {"tag":"td","colspan":"3","html":""} 
     ]} 
    ]} 
]} 

$('#table').json2html(data,map_table);

來源

2012-12-28 04:38:31

將json轉換爲html

回答

相關問題