问 了解将JSON对象循环到HTML表(排序和条件)

EN

您的第一个选择是提供一个固定的表，但是由于您已经开始了数据驱动的路线，所以让我们排除这种可能性。

固定表是指在HTML中预定义该表，然后向其中添加数据。

硬编码表是对数据进行假设的地方，比如它有31列。所以你可以把你的循环写成一个基本的

循环：

for (var i=0;i<=31;i++) {  
    tr.append("" + i + "");

在上述两种情况下，如果您的数据发生更改(例如添加列

)，则需要更新HTML。这就是为什么我们编写数据驱动的应用程序(假设我们可以信任数据源...)

对JSON进行排序

列

- "id“"nama”"bulan“"tahun”标题作为第一列

这个答案

此处提供了详细信息。总之，“数字”键首先显示，然后是字母键。

为了让它们按你想要的顺序排列，你可以改变你的数据，使它不是数字，例如从

[ { "2": { "shift": "9" ...

至

[ { "key2": { "shift": "9" ...

然后确保其他列在前面，并调整代码以排除前缀。

假设您不想更改密钥，您可以更改您的

循环，以便首先找到alpha键(两个循环)，例如：

let tr = $("");
$.each(Object.keys(myObj.data[0]), function(_, key) {
  if (parseInt(key)) return;
  tr.append("" + key + "");
$.each(Object.keys(myObj.data[0]), function(_, key) {
  if (!parseInt(key)) return;
  tr.append("" + key + "");
tr.appendTo(thead);

这里有点枯燥，但只要

不会太长，没人会抱怨。

您还需要更改tbody循环以获得正确的顺序

但是，当与下一个需求结合使用时，不需要执行上述操作，因为只有一个非数字标头

Make condition only object "nama“和所有number对象都会出现在表中(1-31)。

在这种情况下，添加

首先是列，然后是数字列，使用与上面相同的条件，例如：

let tr = $("");
tr.append("nama");
$.each(Object.keys(myObj.data[0]), function(_, key) {
  if (!parseInt(key)) return;
  tr.append("" + key + "");
tr.appendTo(thead);

同样，这将需要对数据循环进行更改-我们可以在下面更容易地实现这一点。

如果某些JSON对象数组不具有相同的编号(例如：一个数组是1-30，另一个是1-31。则最后一列1-30 td为空)

在这种情况下，您应该解析列表

首先

找到

全部

您感兴趣的密钥，然后在每个tr上创建相同的密钥。

在简单的表单中，数据

包含所有必需的标头，则为：

let cols = [];
cols.push("nama");
$.each(Object.keys(myObj.data[0]), function(_, key) {
  if (!parseInt(key)) return;
  cols.push(key);
});

但我们也希望得到其他列-在您的小提琴中，我已经从第一个数据中删除了"1“，并在第二个数据中添加了"33”，以显示这些工作(缺少32，因此它不在列中)

令cols = []；$.each(myObj.data，(

，data)函数{ $.each(Object.keys(data)，=> (

，key) { if (!parseInt(key)) return；if (!cols.includes(key)) cols.push(key)；})；//在此处使用数字排序cols =cols.sort(cols.unshift(a，b) { return a- b；})；//在前面添加特定列(“nama”)；

需要对它们进行排序，以使最初丢失的"1“回到开头。

或者，你可以得到一个最小-最大值在这里渲染所有之间，这也将输出"32“。

然后，通过循环cols，而不是数据键，将其添加到表中

let tr = $("");
$.each(cols, (_,key) => tr.append("" + key + "") );
tr.appendTo(thead);
$.each(myObj.data, function(_, obj) {
  tr = $("");
  $.each(cols, (_,key) => {
     tr.append("" 
               + (!obj[key] 
                     : (obj[key].namashift