CODEWITHSUNDEEP
jqueryhtmljson
user1425385
user1425385

Reputation: 127

transform json to html

I'm trying to include a list of news articles in my page and have been given a link to a json file. I want to convert the data in the json file into html. Below I have listed a sample of what the json structure looks like (it will be in a json file on an external server but for simplicity I included a snippet of it here). I want to render the data in the json file into html like the table structure below. I have tried to accomplish this with jQuery (JSON2HTML - http://json2html.com/) but can not figure it out. Any help will be appreciated!

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

Upvotes: 2

Views: 7194

Answers (2)

Chad Brown
Chad Brown

Reputation: 1667

Figured I would answer this question on how to do this with json2html even though it's a little old

To display the articles the following template can be used: 

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

to wrap the this into a table you would do something like:

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

Upvotes: 4

Lucero
Lucero

Reputation: 60276

Pretty much all JS templating engines do exactly that - fill in some JSON data into a text (HTML) template. You may want to have a look at the many options including jQuery templates, jsRender, mustache, handlebars.js, dust.js etc. (in no particular order)

JSON2HTML however is a bit different in that it doesn't have a textual template but rather uses mappings of objects to create an HTML object tree from a JSON data object tree.

Either way, you need a template (when using traditional text templating) or a mapping (when using JSON2HTML) for this to produce any meaningful results.

Upvotes: 1

Related Questions