2

我正在尝试在我的页面中包含新闻文章列表，并已获得指向 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"
         },
      ]
   }
}
4

2 回答 2

4

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

要将 this 包装到表格中，您可以执行以下操作：

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-28T04:38:31.883 回答
1

几乎所有的 JS 模板引擎都是这样做的——将一些 JSON 数据填充到文本 (HTML) 模板中。您可能想看看许多选项，包括jQuery 模板、jsRender、mustache、handlebars.js、dust.js等（没有特别的顺序）

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

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

于 2012-09-19T09:11:20.427 回答