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

これをテーブルにラップするには、次のようにします。

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 templates、jsRender、mustache、handlebars.js、Dust.jsなど (順不同)を含む多くのオプションを確認することをお勧めします。

ただし、 JSON2HTMLはテキスト テンプレートを持たず、オブジェクトのマッピングを使用して JSON データ オブジェクト ツリーから HTML オブジェクト ツリーを作成するという点で少し異なります。

いずれにしても、意味のある結果を生成するには、テンプレート (従来のテキスト テンプレートを使用する場合) またはマッピング (JSON2HTML を使用する場合) が必要です。

于 2012-09-19T09:11:20.427 に答える