解析 HTML 表的 JSON 對象

Question

我正在嘗試顯示基於 JSON 數據的“排行榜”表。

我已經閱讀了很多關於 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);
    }
});

（$.parseJSON 不是必需的，我們可以使用“數據”，因為我相信 JSON 數組已經被解析）

Answer 1

循環遍歷每個對象，並在每次迭代后向表行添加相關數據。

$(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

Answer 2

您可以使用簡單的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>

Answer 3

循環遍歷每個對象，推入字符串數組並加入它們。 附加在目標表中，效果更好。

$(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('')));
});

Answer 4

您可以將KnockoutJS與jQuery結合使用。 KnockoutJS具有智能的數據綁定功能。 通過使用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
               });
          }
        });

    });

小提琴演示與您的虛擬數據

Answer 5

通過擴展$從對象的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

Answer 6

從嵌套的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;
}

Answer 7

使用或不使用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> 

Answer 8

我花了很多時間來編寫各種報告。 因此，現在我有了一個主意-創建一個用於構建Web報表的Web框架。 我從這里開始：

https://github.com/ColdSIce/ReportUI

現在，它是一個角度4模塊。 您可以將json數據傳遞到TableLayoutComponent並獲取HTML表作為結果。 表已具有固定的標題。 您也可以默認或單擊來修復某些列。 在那里，您可以自定義表格屬性，例如背景顏色，字體顏色，行高等。

如果您有興趣，可以加入我這個項目並提供幫助。

Answer 9

這是將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> 

Answer 10

這是丑陋的，但只想添加一些其他選項即可。 這個沒有循環。 我將其用於調試目的

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> 

Answer 11

此代碼將有很大幫助

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);
            }
        }
    }
}

Answer 12

對於那些對普通 Vanilla 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>

Answer 13

這篇文章對大家都非常有幫助

首先使用jquery eval解析器解析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();
                });