transformer json en html

Question

J'essaie d'inclure une liste d'articles de presse dans ma page et j'ai reçu un lien vers un fichier json. Je veux convertir les données du fichier json en html. J'ai listé ci-dessous un exemple de ce à quoi ressemble la structure json (elle sera dans un fichier json sur un serveur externe, mais pour simplifier, j'en ai inclus un extrait ici). Je veux rendre les données du fichier json en html comme la structure du tableau ci-dessous. J'ai essayé d'accomplir ceci avec jQuery (JSON2HTML - http://json2html.com/ ) mais n'arrive pas à le comprendre. Toute aide sera appréciée !

<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

Je me suis dit que je répondrais à cette question sur la façon de faire cela avec json2html, même si elle est un peu ancienne.

Pour afficher les articles, le modèle suivant peut être utilisé :

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

pour mettre tout cela dans un tableau, vous feriez quelque chose comme.. :

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

Pratiquement tous les moteurs de création de modèles JS font exactement cela : remplir des données JSON dans un modèle texte (HTML). Vous voudrez peut-être jeter un coup d'œil aux nombreuses options, dont les suivantes Modèles jQuery , jsRender , moustache , guidon.js , dust.js etc. (sans ordre particulier)

JSON2HTML est toutefois un peu différent dans la mesure où il ne dispose pas d'un modèle textuel mais utilise plutôt des mappages d'objets pour créer un arbre d'objets HTML à partir d'un arbre d'objets de données JSON.

D'une manière ou d'une autre, vous avez besoin d'un modèle (si vous utilisez un modèle de texte traditionnel) ou d'un mappage (si vous utilisez JSON2HTML) pour que cela produise des résultats significatifs.