javascript - 使用 JSON 键和 JavaScript 创建单独的表

Question

问题编辑为立即得到 1 个解决方案

我的任务目标是使用具有不同标题的不同 JSON 键（此处为 A, B ）创建单独的表。

下面给出了一个工作示例

var data = [{

    "A": {
        "value1": {
            "name": "MAK",
            "value": 12,
            "unit": 0.778
        },
        "value2": {
            "name": "JAK",
            "value": 15,
            "unit": 15.95
        }
    },

    "B": {
        "value1": {
            "lastname": "MAK",
            "age": 12,
            "color": 0.778,
            "place": "DE"
        },
        "value2": {
            "lastname": "JAK",
            "age": 15,
            "color": 15.95,
            "place": "EU"
        }
    }
}];

var len_A; //expected 2, value 1, value 2
var len_key_A; //expected 3, name, value, unit 
var all_info_A = [];
var table = document.getElementById('test_table');
// var cap = table.createCaption();
// cap.innerHTML = 'Observation of Machine Statistics';

function createTable() {
    var table = document.getElementById('test_table');
    return table;
}


function giveCaptionTable(k, table) {
    var rows = table.insertRow(-1);
    let cell1 = rows.insertCell(-1);
    cell1.innerHTML = 'Property of table ' + k;
}

function CreateColumnHeader(my_sub_sub_key, table) {
    var rows = table.insertRow(-1);
    for (var a in my_sub_sub_key) {
        //console.log(my_sub_sub_key[a]);
        let cell1 = rows.insertCell(a);
        cell1.innerHTML = my_sub_sub_key[a];
        // console.log("a: ", a);
    }
    // rows = '<tr><th' +rows + '</th></tr>'
}

function FillUpTable(len_A, len_key_A, all_info_A, table) {
    let count_index_all_info_A = 0;
    var rows = table.insertRow(-1);
    for (let x = 0; x < len_A; x++) {
        var rows = table.insertRow(-1);
        for (let y = 0; y < len_key_A; y++) {
            let cell1 = rows.insertCell(y);
            cell1.innerHTML = all_info_A[count_index_all_info_A];
            count_index_all_info_A++;
        }
    }
}

for (var num_i = 0; num_i < 3; num_i++) {
    for (var p in data) {
        table.textContent = '';
        //console.log(data[p]); //whole data
        for (var k in data[0]) {
            giveCaptionTable(k, table);
            var cap = table.createCaption();
            cap.innerHTML = 'Observation of Machine Statistics ' + k;
            //console.log(k); // A,......
            var count_col = 0; // column header will be repeated so count them
            var col_header_name = []; // after count all 1 time then push them in an array
            //console.log("length of A's content", Object.keys(data[p][k]).length); // will be 2(value1, value2)
            len_A = Object.keys(data[p][k]).length;
            for (var s in data[0][k]) {
                //console.log(s); // value1, value2 ......
                //console.log(data[0][k][s]); // inside elements with info of each value
                //console.log("length of each value's content", Object.keys(data[p][k][s]).length); // will be 3 here(name, value , unit)
                len_key_A = Object.keys(data[p][k][s]).length;
                for (var t in data[0][k][s]) {
                    col_header_name.push(t);
                    //console.log(t); // name , value, unit .. n times (n = how many times former key is)
                    //console.log(data[0][k][s][t]);
                    all_info_A.push(data[0][k][s][t]);
                }
                count_col++; // if it 1 that means for the child key of "A"(device) is read and got All col name(name, value, unit)
                if (count_col == 1) { CreateColumnHeader(col_header_name, table); } // call the CreateColumnHeader func
            }
            FillUpTable(len_A, len_key_A, all_info_A, table);
            all_info_A = [];
        }
    }
}

#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#test_table td, #test_table th {
  border: 1px solid #ddd;
  padding: 8px;
}

#test_table tr:nth-child(even){background-color: #f2f2f2;}

#test_table tr:hover {background-color: #ddd;}

#test_table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}

<table id = "test_table"></table>

我的要求和方法
1/ 在 JSON 数据中存在密钥A 和 B。我需要两个单独的表格，每个表格都有不同的标题。
方法：在86 num 行中，我认为如果我调用表对象，它将创建单独的表。但是失败了。对于在90 和 91 数字行中尝试但失败的标题。虽然很明显，因为表对象仅创建了 1 次。

任何解决方案都将受到高度赞赏。

标签： javascripthtmljqueryjson