Question

我正在尝试在我的页面中包含一个新闻文章列表，并且已经获得了一个json文件的链接。我想将json文件中的数据转换为html。下面我列出了json结构的样例（它将在外部服务器上的json文件中，但为了简单起见，我在此处包含了它的片段）。我想将json文件中的数据渲染为html，如下面的表结构。我试图用jQuery（JSON2HTML - http://json2html.com/）来完成这个，但无法弄明白。任何帮助将不胜感激！

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

Answer 1

想我会回答这个问题关于如何用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);

Answer 2

几乎所有JS模板引擎都是这样做的 - 将一些JSON数据填充到文本（HTML）模板中。您可能需要查看许多选项，包括jQuery templates，jsRender，mustache，handlebars.js，dust.js等（按特定顺序排列）< / p> 然而，

JSON2HTML有点不同，因为它没有文本模板，而是使用对象的映射来从JSON数据对象树创建HTML对象树。

无论哪种方式，您都需要一个模板（使用传统文本模板时）或映射（使用JSON2HTML时），以产生任何有意义的结果。

将json转换为html

2 个答案: