JSON을 사용하여 부트 스트랩 모달에 테이블 열 텍스트를 생성하는 방법

Question

현재 JSON에 정의 된 키 값 쌍을 사용하여 테이블을 생성하려고합니다 (키는 열 -1에 해당하고 값은 열 2에 해당). 출력은 다음과 같아야합니다 : Expected output. 요청시 Ajax 호출을 사용하여이 테이블을 생성하는 표준 방법이 있는지 알고 싶습니다.

{ 
'Name': 'Foo', 
'License Type' : 'Demo', 
'Num of Instances allowed' :20, 
'License Activation Date' :'20 jan 2014', 
'License Expiry Date':'20 Jan 2015' 


} 

지금까지 내 코드 :

<button class="btn btn-info" data-toggle="modal" data-target=".bs-example-modal-sm"><i class="icon-info-sign"></i> License 
</button> 
<div id="event-modal" class="modal fade bs-example-modal-sm"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <a class="close" data-dismiss="modal" href="#">x</a> 
     <h3 style='text-align:center;'>Test</h3> 
     </div> 
     <div class="modal-body"> 
     <table class="table table-bordered"> 

     <tbody> 
      <tr> 
       <td class='tright'><strong>Name</strong></td> 
      <td class='tcenter'>Foo</td> 
      </tr> 
      <tr> 
       <td class='tright'><strong>License Type</strong></td> 
      <td class='tcenter'>Demo</td> 
      </tr> 
      <tr> 
       <td class='tright'><strong>Num of Instances allowed</strong></td> 
      <td class='tcenter'> 20</td>   
      </tr> 
      <tr> 
       <td class='tright'><strong>License Activation Date</strong></td> 
      <td class='tcenter'>23 March 2014</td> 
      </tr> 
      <tr> 
       <td class='tright'><strong>License Expiry Date</strong></td> 
      <td class='tcenter'>23 March 2015</td> 
      </tr> 
     </tbody> 
     </table> 

     </div> 
    <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 

     </div> 
    </div> 
    </div> 
</div> 

감사

Answer 1

Bootply : http://www.bootply.com/128620

JS 다음 JSON 스키마는 다음과 같이 정의된다 나는 여기에 데이터를 설정 ,하지만 귀하의 경우에는 데이터 아약스 호출 결과입니다. 문서 준비는 Ajax 호출의 성공 함수입니다.

var data = { 
'Name': 'Foo', 
'License Type' : 'Demo', 
'Num of Instances allowed' :20, 
'License Activation Date' :'20 jan 2014', 
'License Expiry Date':'20 Jan 2015' 
} ; 

$(document).ready(function(){ 
    for(key in data) { 
    var newline = "<tr><td class='tright'><strong>"+key+"</strong></td><td class='tcenter'>"+data[key]+"</td></tr>"; 
     $('.table tbody').append(newline); 
    } 
}); 

HTML :

<button class="btn btn-info" data-toggle="modal" data-target=".bs-example-modal-sm"><i class="icon-info-sign"></i> License 
</button> 
<div id="event-modal" class="modal fade bs-example-modal-sm"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <a class="close" data-dismiss="modal" href="#">x</a> 
     <h3 style="text-align:center;">Test</h3> 
     </div> 
     <div class="modal-body"> 
     <table class="table table-bordered">  
     <tbody> 

     </tbody> 
     </table> 

     </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div>