为每个对象构建表格行,为每个属性构建单元格 [closed]

Build table row for each object & cell for each property [closed]

提问人:Travis 提问时间:11/3/2023 最后编辑:j08691Travis 更新时间:11/3/2023 访问量:53

问:


想改进这个问题吗?更新问题,使其仅通过编辑这篇文章来关注一个问题。

19天前关闭。

尝试使用 JSON 数据填充表。我是 JSON 的新手。

console.log(JSON.stringify(users)) = 
[{
"fullname":"Bob Wirth",
"email":"Bob @mydomain.com",
"status":"A",
"lockcnt":"0",
"lastlogin":"2023-10-24 23:50:08.304896"
},{
"fullname":"Jane",
"email":"[email protected]",
"status":"A",
"lockcnt":"0",
"lastlogin":"2023-11-03 11:31:57.18215"
}]

如何构建一个 each 来遍历每个对象,然后遍历每个属性,以便我可以在对象上生成 tr 标签,在属性上生成 td。

HTML jQuery JSON

评论

3赞 Death-is-the-real-truth 11/3/2023
你试过什么吗?请使用尝试的代码更新您的问题。
0赞 freedomn-m 11/3/2023
首先阅读以下内容:什么是 JSON,它的用途是什么
0赞 freedomn-m 11/3/2023
JSON允许你传输数据,差不多就是这样--你不“迭代JSON” - 你迭代JSON所代表的对象--在你的情况下。这里根本不需要“JSON”。所以(使用插值/模板只是一个简单的例子)usersusers.forEach((u) => $("#tbl").append("<tr><td>" + u.fullname + "</td></tr>"))
0赞 Death-is-the-real-truth 11/3/2023
jsfiddle.net/p8xu501z
0赞 Twisty 11/3/2023
请澄清结果应该是什么样子。目前尚不清楚您可能需要标题的位置,或者是否应该进行任何分组。目前尚不清楚该表应在 HTML 中的哪个位置返回,也不清楚创建后要对该表执行哪些操作。请提供一个最小的可重复示例

答:

-1赞 Twisty 11/3/2023 #1

如果我们不做任何假设,比如你希望表将键显示为标题,那么你将需要执行一个嵌套循环的循环。第一个循环将从 Array 的每个元素创建 Rows。第二个循环将填充对象中的单元格。

一个基本的例子:

$(function() {
  var users = [{
    "fullname": "Bob Wirth",
    "email": "Bob @mydomain.com",
    "status": "A",
    "lockcnt": "0",
    "lastlogin": "2023-10-24 23:50:08.304896"
  }, {
    "fullname": "Jane",
    "email": "[email protected]",
    "status": "A",
    "lockcnt": "0",
    "lastlogin": "2023-11-03 11:31:57.18215"
  }];

  function makeTable(bodyData, target) {
    var $t = $("<table>");
    $.each(bodyData, function(key, row) {
      $("<tr>").appendTo($t);
      $.each(row, function(i, cell) {
        $("<td>").html(cell).appendTo($("tr:last", $t));
      });
    });
    if (target != undefined) {
      $(target).html($t);
    }
    return $t;
  }
  
  makeTable(users, "#results");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="results"></div>

由此,您可以执行许多额外的步骤,例如,您可以从其中一个对象中收集密钥并为表构建标头。

还有很多可以使用的框架,比如 Datatables,它们可以为你完成这一切。