HTML 테이블의 JSON 오브젝트 해석

HTML 테이블의 JSON 오브젝트 해석

JSON 데이터를 기반으로 "leaderboard" 테이블을 표시하려고 합니다.

JSON 포맷에 대해 많이 읽고 초기 장애물을 극복했습니다만, Javascript의 지식은 매우 한정되어 있기 때문에 도움이 필요합니다!

기본적으로 JSON 데이터는 다음과 같습니다.

[{"User_Name":"John Doe","score":"10","team":"1"},{"User_Name":"Jane Smith","score":"15","team":"2"},{"User_Name":"Chuck Berry","score":"12","team":"2"}]

이 어레이를 루프하여 각 오브젝트의 테이블 행 또는 목록 항목을 생성할 수 있어야 합니다.어레이에 알 수 없는 총 객체의 양이 있지만 각 객체의 형식은 동일합니다. 세 가지 값:이름, 점수, 팀

지금까지 다음 코드를 사용하여 콘솔에 개체를 성공적으로 로드하고 있음을 확인했습니다.

$.getJSON(url,
function(data){
  console.log(data);
});

HTML 표로 해석하면서 어떻게 반복해야 할지 모르겠어요.

다음 단계는 점수를 기준으로 항목을 내림차순으로 정렬하는 것입니다.

어떤 도움이라도 주시면 감사하겠습니다.감사합니다!

편집:

아래 코드가 갱신되었습니다.이 기능은 다음과 같습니다.

$.getJSON(url,
function (data) {
    var tr;
    for (var i = 0; i < data.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + data[i].User_Name + "</td>");
        tr.append("<td>" + data[i].score + "</td>");
        tr.append("<td>" + data[i].team + "</td>");
        $('table').append(tr);
    }
});

($.parseJ.SON은 불필요했습니다.JSON 어레이는 이미 해석되어 있기 때문에 '데이터'를 사용할 수 있습니다.)

각 오브젝트에 루프하여 각 반복마다 관련 데이터가 포함된 테이블 행을 추가합니다.

$(document).ready(function () {
    $.getJSON(url,
    function (json) {
        var tr;
        for (var i = 0; i < json.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + json[i].User_Name + "</td>");
            tr.append("<td>" + json[i].score + "</td>");
            tr.append("<td>" + json[i].team + "</td>");
            $('table').append(tr);
        }
    });
});

JSFiddle

간단한 jQuery jPut 플러그인을 사용할 수 있습니다.

http://plugins.jquery.com/jput/

<script>
$(document).ready(function(){

var json = [{"name": "name1","score":"30"},{"name": "name2","score":"50"}];
//while running this code the template will be appended in your div with json data
$("#tbody").jPut({
    jsonData:json,
    //ajax_url:"youfile.json",  if you want to call from a json file
    name:"tbody_template",
});

});
</script>   

<div jput="tbody_template">
 <tr>
  <td>{{name}}</td>
  <td>{{score}}</td>
 </tr>
</div>

<table>
 <tbody id="tbody">
 </tbody>
</table>

각 오브젝트를 루프하고 문자열 배열을 삽입하여 결합합니다.대상 테이블에 추가하면 더 좋습니다.

$(document).ready(function () {
$.getJSON(url,
function (json) {
    var tr=[];
    for (var i = 0; i < json.length; i++) {
        tr.push('<tr>');
        tr.push("<td>" + json[i].User_Name + "</td>");
        tr.push("<td>" + json[i].score + "</td>");
        tr.push("<td>" + json[i].team + "</td>");
        tr.push('</tr>');
    }
    $('table').append($(tr.join('')));
});

녹아웃 사용 가능jQuery가 있는 JS녹아웃JS에는 스마트 데이터 바인딩 기능이 있습니다.foreach 바인딩 기능을 사용하면 다음과 같이 코드를 쓸 수 있습니다.

HTML:

<table>
    <thead>
        <tr>
            <th>User Name</th>
            <th>Score</th>
            <th>Team</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: teams">
        <tr>
            <td data-bind="text: User_Name"></td>
            <td data-bind="text: score "></td>
            <td data-bind="text: team "></td>
        </tr>
    </tbody>
</table>

JavaScript:

$(document).ready(function () {
        $.getJSON(url,function (json) {
               ko.applyBindings({
                  teams: json
               });
          }
        });

    });

더미 데이터를 사용한 바이올린 데모

아래와 같이 $를 확장하여 개체의 JSON 배열에서 HTML 테이블을 만듭니다.

$.makeTable = function (mydata) {
            var table = $('<table border=1>');
            var tblHeader = "<tr>";
            for (var k in mydata[0]) tblHeader += "<th>" + k + "</th>";
            tblHeader += "</tr>";
            $(tblHeader).appendTo(table);
            $.each(mydata, function (index, value) {
                var TableRow = "<tr>";
                $.each(value, function (key, val) {
                    TableRow += "<td>" + val + "</td>";
                });
                TableRow += "</tr>";
                $(table).append(TableRow);
            });
            return ($(table));
        };

및 다음과 같이 사용합니다.

var mydata = eval(jdata);
var table = $.makeTable(mydata);
$(table).appendTo("#TableCont");

여기서 TableCont는 div입니다.

이건 못생겼지만, 그냥 다른 선택지를 던져버리고 싶을 뿐이야.이건 루프가 없어요디버깅 목적으로 사용합니다.

var myObject = {a:1,b:2,c:3,d:{a:1,b:2,c:3,e:{a:1}}}
var myStrObj = JSON.stringify(myObject)
var myHtmlTableObj = myStrObj.replace(/{/g,"<table><tr><td>").replace(/:/g,"</td><td>","g").replace(/,/g,"</td></tr><tr><td>","g").replace(/}/g,"</table>")

$('#myDiv').html(myHtmlTableObj)

예:

    var myObject = {a:1,b:2,c:3,d:{a:1,b:2,c:3,e:{a:1}}}
    var myStrObj = JSON.stringify(myObject)
    var myHtmlTableObj = myStrObj.replace(/\"/g,"").replace(/{/g,"<table><tr><td>").replace(/:/g,"</td><td>","g").replace(/,/g,"</td></tr><tr><td>","g").replace(/}/g,"</table>")

    $('#myDiv').html(myHtmlTableObj)

#myDiv table td{background:whitesmoke;border:1px solid lightgray}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='myDiv'>table goes here</div>

네스트된 JSON 개체에서 HTML을 생성하는 또 다른 재귀적 방법(현재 어레이를 지원하지 않음):

// generate HTML code for an object
var make_table = function(json, css_class='tbl_calss', tabs=1){
    // helper to tabulate the HTML tags. will return '\t\t\t' for num_of_tabs=3
    var tab = function(num_of_tabs){
        var s = '';
        for (var i=0; i<num_of_tabs; i++){
            s += '\t';
        }
        //console.log('tabbing done. tabs=' + tabs)
        return s;
    }
    // recursive function that returns a fixed block of <td>......</td>.
    var generate_td = function(json){ 
        if (!(typeof(json) == 'object')){
            // for primitive data - direct wrap in <td>...</td>
            return tab(tabs) + '<td>'+json+'</td>\n';
        }else{
            // recursive call for objects to open a new sub-table inside the <td>...</td>
            // (object[key] may be also an object)
            var s = tab(++tabs)+'<td>\n';
            s +=        tab(++tabs)+'<table class="'+css_class+'">\n';
            for (var k in json){
                s +=        tab(++tabs)+'<tr>\n';
                s +=          tab(++tabs)+'<td>' + k + '</td>\n';
                s +=                      generate_td(json[k]);
                s +=        tab(--tabs)+'</tr>' + tab(--tabs) + '\n';


            }
            // close the <td>...</td> external block
            s +=        tab(tabs--)+'</table>\n';
            s +=    tab(tabs--)+'</td>\n';
            return s;
        }
    }
    // construct the complete HTML code
    var html_code = '' ;
    html_code += tab(++tabs)+'<table class="'+css_class+'">\n';
    html_code +=   tab(++tabs)+'<tr>\n';
    html_code +=     generate_td(json);
    html_code +=   tab(tabs--)+'</tr>\n';
    html_code += tab(tabs--)+'</table>\n';
    return html_code;
}

jQuery를 사용하거나 사용하지 않고 동일한 작업을 수행하는 두 가지 방법은 다음과 같습니다.

// jquery way
$(document).ready(function () {
    
  var json = [{"User_Name":"John Doe","score":"10","team":"1"},{"User_Name":"Jane Smith","score":"15","team":"2"},{"User_Name":"Chuck Berry","score":"12","team":"2"}];
        
  var tr;
  for (var i = 0; i < json.length; i++) {
    tr = $('<tr/>');
    tr.append("<td>" + json[i].User_Name + "</td>");
    tr.append("<td>" + json[i].score + "</td>");
    tr.append("<td>" + json[i].team + "</td>");
    $('table').first().append(tr);
  }  
});

// without jquery
function ready(){
 var json = [{"User_Name":"John Doe","score":"10","team":"1"},{"User_Name":"Jane Smith","score":"15","team":"2"},{"User_Name":"Chuck Berry","score":"12","team":"2"}];
  const table = document.getElementsByTagName('table')[1];
  json.forEach((obj) => {
      const row = table.insertRow(-1)
    row.innerHTML = `
      <td>${obj.User_Name}</td>
      <td>${obj.score}</td>
      <td>${obj.team}</td>
    `;
  });
};

if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
  ready();
} else {
  document.addEventListener('DOMContentLoaded', ready);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <th>User_Name</th>
        <th>score</th>
        <th>team</th>
    </tr>
</table>'
<table>
    <tr>
        <th>User_Name</th>
        <th>score</th>
        <th>team</th>
    </tr>
</table>

저는 여러 가지 보고서를 작성하는데 많은 시간을 투자했습니다.이제 웹 보고서 작성을 위한 웹 프레임워크를 만드는 아이디어가 떠올랐습니다.여기서부터 시작합니다.

https://github.com/ColdSIce/ReportUI

이제 각진 4모듈이 되었습니다.Json 데이터를 TableLayoutComponent에 전달하여 HTML 테이블을 얻을 수 있습니다.테이블에 이미 고정된 헤더가 있습니다.또한 일부 열은 기본적으로 또는 클릭으로 수정할 수 있습니다.또, 배경색, 폰트색, 행높이등의 테이블 속성을 커스터마이즈 할 수 있습니다.

관심이 있으시다면 저와 함께 이 프로젝트에 참여하셔서 도움을 주실 수 있습니다.

다음은 json 객체를 Html 테이블로 해석하는 다른 방법입니다.

//EXTRACT VALUE FOR HTML HEADER.
// ('Book ID', 'Book Name', 'Category' and 'Price')
var col = [];

for (var i = 0; i < d.length; i++) {
  for (var key in d[i]) {
if (col.indexOf(key) === -1) {
  col.push(key);
}
  }
}

// CREATE DYNAMIC TABLE.
var table = document.createElement("table");

// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1);    // TABLE ROW.               
                 
for (var i = 0; i < col.length; i++) {
  var th = document.createElement("th");// TABLE HEADER.
  th.innerHTML = col[i];
  tr.appendChild(th);
}

// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < d.length; i++) {
  tr = table.insertRow(-1);

  for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = d[i][col[j]];
  }
}

// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

이 코드는 많은 도움이 될 것이다.

function isObject(data){
    var tb = document.createElement("table");

    if(data !=null) {
        var keyOfobj = Object.keys(data);
        var ValOfObj = Object.values(data);

        for (var i = 0; i < keyOfobj.length; i++) {
            var tr = document.createElement('tr');
            var td = document.createElement('td');
            var key = document.createTextNode(keyOfobj[i]);

            td.appendChild(key);
            tr.appendChild(td);
            tb.appendChild(tr);

            if(typeof(ValOfObj[i]) == "object") {

                if(ValOfObj[i] !=null) {
                    tr.setAttribute("style","font-weight: bold");   
                    isObject(ValOfObj[i]);
                } else {
                    var td = document.createElement('td');
                    var value = document.createTextNode(ValOfObj[i]);

                    td.appendChild(value);
                    tr.appendChild(td);
                    tb.appendChild(tr);
                }
            } else {
                var td = document.createElement('td');
                var value = document.createTextNode(ValOfObj[i]);

                td.appendChild(value);
                tr.appendChild(td);
                tb.appendChild(tr);
            }
        }
    }
}

플레인 바닐라 JS의 일반적인 솔루션에 관심이 있는 분들을 위해.json에 있는 열의 수와 독립적으로 작동합니다.

const myData = [{"User_Name":"John Doe","score":"10","team":"1"},{"User_Name":"Jane Smith","score":"15","team":"2"},{"User_Name":"Chuck Berry","score":"12","team":"2"}]

const createTable = (json) => {
  let table = document.getElementById('js-table')

  for (let row of json) {
    let newRow  = table.insertRow();
    for (let cell of Object.values(row)) {
      let newCell = newRow.insertCell();
      let newText  = document.createTextNode(cell);
      newCell.appendChild(newText);
    }     
  }
}

createTable(myData)

<table>
  <tbody id="js-table">
  </tbody>
</table>

이 게시물은 여러분 모두에게 매우 도움이 됩니다.

먼저 jquery eval parser를 사용하여 json 데이터를 해석한 다음 jquery를 통해 반복 추출하는 각 함수는 코드 스니플릿입니다.

                var obj = eval("(" + data.d + ")");

                alert(obj);
                $.each(obj, function (index,Object) {

                    var Id = Object.Id;
                    var AptYear = Object.AptYear;
                    $("#ddlyear").append('<option value=' + Id + '>' + AptYear + '</option>').toString();
                });

언급URL : https://stackoverflow.com/questions/17066636/parsing-json-objects-for-html-table