json을 html로 변환

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

거의 모든 JS 템플릿 엔진은 텍스트 (HTML) 템플릿으로 일부 JSON 데이터를 채우기 만합니다. 이 텍스트 템플릿을하지 않는다는 점에서 당신은

JSON2HTML 그러나 조금 다르다 (특별한 순서없이) jQuery templates, jsRender, mustache, handlebars.js, dust.js 등을 포함하여 많은 옵션을 살펴 가지고 할 수 있지만, 오히려 객체 매핑을 사용하여 JSON 데이터 객체 트리에서 HTML 객체 트리를 만듭니다.

어느 쪽이든, (기존 텍스트 템플릿을 사용할 때) 템플릿이나 (JSON2HTML을 사용할 때) 매핑을 사용하여 의미있는 결과를 얻을 수 있어야합니다.

Answer 2

나는 그것이

다음과 같은 템플릿을 사용할 수있는 기사를 표시하는 방법 좀 오래된 비록 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);