JSON 데이터에서 html 테이블 생성

이 스 니펫이 포함 된 html 파일이 있습니다. JSON 데이터에서 html 테이블 생성

{ 
    "1": [ 
     { 
      "A": "", 
      "B": "", 
      "C": "", 
      "D": "", 
      "E": "" 
     } 
    ] 
}

는 정확히 하나의 "1"이있을 것이다, 그러나 "1" 목록에서 하나 개 이상의 사전이있을 수 있습니다

<div> 
    <table id="apps"></table> 
</div>

I는 다음과 같습니다 JSON 데이터를 수신하고 있습니다. 이 예에서는 목록 내에 이 하나만 있지만 []이지만 위에 표시된 것과 같이 정확히 다섯 개의 항목을 포함하는 {}이 여러 개있을 수 있습니다.

이 데이터에서 각 행은 내의 단일 {}을 나타내며 A, B, C, D, E를 각각 나타내는 5 개의 열이있는 표를 만들고 싶습니다.

이 구조는 이미 내 html에있는 태그 (이 태그는 내 html 코드에 포함되어 있지 않음)가 있어야하고 다음 태그를 채우거나 내 HTML 파일에이 데이터를로드해야하는지 잘 모르겠습니다. access table id = "apps"를 만들고이 태그를 만든 다음이 태그를 채우시겠습니까? 어떤게 더 좋아? 그리고 이것을 어떻게 효율적으로 수행 할 수 있을까요?

출처

2016-11-03 Teodorico Levoff

이 숙제가 아닌 경우

var dataObj = { "1": [{ "A": "", "B": "", "C": "", "D": "", "E": "" }, { "F": "", "G": "", "H": "", "I": "", "J": "" }, { "K": "", "L": "", "M": "", "N": "", "O": "" } ]}; var dictionaryData = dataObj["1"]; for (var i in dictionaryData) { var table = document.getElementById("apps"); var tr = document.createElement("tr"); var td = document.createElement("td"); for (var key in dictionaryData[i]) { var txt = document.createTextNode(key); td.appendChild(txt); tr.appendChild(td); } table.appendChild(tr); }

table, td { border: 1px solid black; }

<div> <table id="apps"></table> </div>

, 나는 강하게의 jQuery DataTables를 추천 할 것입니다. – Doug

이 간단한 작업 예제를보십시오. 나는 그것이 당신의 기대에 따라 작동되기를 바랍니다. 이 테이블에 JSON 데이터를 변환하는 훌륭한 일을 같이

출처

2016-11-04 10:09:37

코드를 수정해야합니다. 지금은 각 TR에 TD가 하나만 생성됩니다. –

프로젝트에 대한 요구 사항을 모르겠지만 그 모든 문제는 건너 뛰고 DataTables과 같은 라이브러리를 사용합니다. AJAX 또는 data sources에서 표를 채우는 방법은 여러 가지가 있습니다. 표준을 준수하기 위해 테이블 데이터 소스를 고칠 수없는 경우에도 다시 포맷하려면 method이 필요합니다.

출처

2016-11-04 00:00:50

"테이블 행과 셀 태그가 이미 마크 업되어 있거나 데이터를 얻을 때 빌드하는 것이 더 좋습니다."

더 나은 옵션은 개체를 가져올 때 데이터를 작성하는 것입니다. pseduocode에서

for each object in 1 
    make new row <tr></tr> 

    for each data in object 
    make new cell <td></td> 
    insert data into <td>[here]</td> 
    insert cell into <tr>[here]</tr> 

    insert filled row into "apps" by using it's ID 
done

당신이 알고 싶었던이 충분할합니까?

출처

2016-11-04 00:17:34 Nol

확인이 데모는 :

var jsonResponse = { 
 
    "1": [{ 
 
      "A": "", 
 
      "B": "", 
 
      "C": "", 
 
      "D": "", 
 
      "E": "" 
 
     }, 
 
     { 
 
      "F": "", 
 
      "G": "", 
 
      "H": "", 
 
      "I": "", 
 
      "J": "" 
 
     } 
 
    ], 
 
    "2": [{ 
 
      "K": "", 
 
      "L": "", 
 
      "M": "", 
 
      "N": "", 
 
      "O": "" 
 
     }, 
 
     { 
 
      "P": "", 
 
      "Q": "", 
 
      "R": "", 
 
      "S": "", 
 
      "T": "" 
 
     } 
 
    ] 
 
}; 
 

 
$.each(jsonResponse, function(outerKey, list) { 
 
    var row = $('<tr>', { 
 
     id: 'row_' + outerKey 
 
    }); 
 
    $.each(list, function(innerKey, value) { 
 
     for (var key in value) { 
 
      var col = $('<td>', { 
 
       id: key, 
 
       text: key 
 
      }) 
 
      row.append(col); 
 
     } 
 
    }); 
 
    $('#apps').append(row); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <table id="apps"></table> 
 
</div>

출처

2016-11-04 03:24:46 four

JSON 데이터에서 html 테이블 생성

답변

관련 문제