json 개체를 HTML로 변환하는 최적의 솔루션

내 HTML 페이지는 주로 서버에서 검색 한 페이지 목록을 표시합니다. json 개체를 HTML로 변환하는 최적의 솔루션

나는이 회 전자와 페이지 목록없이 페이지를 렌더링 두 부분

에 구현하기로 결정했습니다. 페이지가 내가 JSON으로 내 자바 스크립트 라이브러리로 내가 jQuery를 사용하고
를 페이지 목록을 검색하기 위해 AJAX 호출을하고로드 된 후

나는 AJAX를 통해 JSON을 얻을 수있는 내가 HTML로 변환하고 그에 따라 페이지에 표시해야합니다.

이전에 비슷한 번역을하지 않았으므로 JSON을 html로 변환하는 최적의 방법이 무엇인지 알고 싶습니다.

나는 약간 연구를했다. 라이브러리를 사용하거나 각 요소를 반복하고 div를 생성하는 방법을 볼 수있었습니다.

어느 것이 좋을까요? 내 JSON의

샘플 읽는

{ 
    "SomeID": 12345, 
    "someName": "somefile", 
    "totalPageNum": 5, 
    "pages": [ //Array of pages 
     { 
      "pageFields": [ // Array of page fields 
       { 
        "field": { 
         "id": 1, 
         "type": "someType", 
         "name": "someFieldName", 
         "value": "Some Field Value" 
        }, 
        "coordinates": { 
         "x": 105, 
         "y": 543 
        } 
       } 
      ], 
      "somePagenumber": "1", 
      "somePageURLurl": "/location/to/page1" 
     } 
    ] 
}

감사 같은 것!

출처

2014-01-21 linux developer

같은 템플릿 엔진을 사용하는 것을 고려

? JSON에는 단순히 HTML이 포함 된 문자열 목록이 포함되어 있습니까? 샘플 데이터가 제공된 –

. 아니요, 데이터에서 html을 구성해야합니다. json에는 HTML 태그에 대한 참조가 없습니다. 그 값은 따라서 –

에 따라 HTML을 구성하기 위해 평가되어야합니다 jscery의 도움으로도 못 생기는 dom 조작 대신 특수 html을 사용하여 json을 사용자 정의 html로 변환하는 콧수염을 좋아합니다 ... – dandavis

"최적 해"라는 용어는 편향되어 있습니다. 좋은 해결책은 무엇입니까? JQuery를 사용하십시오.

예 :

<!-- Include JQuery, only one time in the page header --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<script> 
$(document).ready(function(){ 
$.getJSON("/admin/json/endpoint",function(data) {   
    $.each(data.collection, function(i,e) { 
    var lmod = formatDate(new Date(e["lmodified"])); 
    var row = "<tr><td>"+e["name"]+"</td><td>"+lmod+"</td>" 
    $("#dpub tr:first").after(row); 
    }); 
}); 
</script> 

<table id="dpub" style="width:100%;"> 
<tr> 
    <th style="width:20%;">Name</th> 
    <th>Last modified</th> 
</tr> 
</table>

참조 : http://api.jquery.com/jquery.getjson/

을 console.log (데이터) 자바 스크립트에서 반환 된 객체의 구조를 이해하는 데 도움이 될 수 있습니다. 내용을 보려면 브라우저 자바 스크립트 콘솔을여십시오. 상황이 복잡한지고 당신은뿐만 아니라 테이블에 간단한 행을 추가 할 할 때, 당신은 예를 들어 JSON 응답을 게시 할 수 mustache.js

출처

2014-01-21 20:07:20

JavaScript를 사용하여 HTML을 각 요소를 반복하고 문자열 연결을 사용하여 JavaScript로 문자열을 만들 수 있습니다 (앞에서 설명한대로).

가벼운 JavaScript 템플릿 시스템을 사용하여 더 깨끗한 코드를 만들 수도 있습니다. mustache.js을 사용하는 것이 좋습니다.

어느 쪽이든, 결국 jQuery's .html()과 같은 것을 사용하여 실제 페이지에 삽입하십시오.

출처

2014-01-21 20:03:39 mtaube

json 개체를 HTML로 변환하는 최적의 솔루션

답변

관련 문제