42

我正在尝试显示基于 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 数组已经被解析）

4

13 回答 13

94

循环遍历每个对象，在每次迭代时附加一个带有相关数据的表格行。

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

于 2013-06-12T13:28:55.560 回答
8

您可以使用简单的 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>
于 2014-06-01T15:09:38.797 回答
6

遍历每个对象，推入字符串数组并加入它们。追加到目标表中，这样更好。

$(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('')));
});
于 2015-01-09T14:02:32.243 回答
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
               });
          }
        });

    });

使用您的虚拟数据进行Fiddle Demo

于 2015-01-09T06:31:58.630 回答
2

通过扩展 $ 从 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

于 2015-01-07T07:06:55.520 回答
2

这个很丑，但只是想在其中加入一些其他选项。这个没有循环。我将它用于调试目的

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>

于 2018-10-01T17:47:24.133 回答
1

另一种从嵌套 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;
}
于 2016-12-28T09:21:07.523 回答
0

这是将 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>

于 2018-04-10T14:03:35.820 回答
0

这里有两种方法来做同样的事情，有或没有 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>

于 2017-08-03T16:16:45.460 回答
0

对于那些对普通 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>

于 2022-01-11T14:07:42.970 回答
0

我花了很多时间开发各种报告。所以，现在我有了一个想法——创建一个用于构建 Web 报告的 Web 框架。我从这里开始：

https://github.com/ColdSIce/ReportUI

现在它是一个Angular 4模块。您可以将 json数据传递给 TableLayoutComponent 并获得一个 HTML 表格作为结果。表已经有固定的标题。您也可以默认或单击修复一些列。更多的是，您可以自定义表格属性，如背景颜色、字体颜色、行高等。

如果您有兴趣，可以加入我的这个项目并提供帮助。

于 2017-08-31T06:42:10.457 回答
0

这段代码会有很大帮助

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);
            }
        }
    }
}
于 2019-04-03T06:51:27.270 回答
-1

这篇文章对大家很有帮助

首先使用 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();
                });
于 2014-03-29T19:20:02.110 回答