Question

我想在表中显示json数据。尝试键值模式。但是没有运气。有人可以建议我吗？谢谢。

我的完整JSON数据包含大约20个对象。这是根据其他表的值动态创建的表-示例具有3。因此，当它为三行时，如果存在，则应仅从JSON数据中填充三行。例如，如果5行，则应从json填充3行，而两行应显示'-'。

function setTrait_matrix() {

    var json_data = {
        Title1_Title1: "11yty",
        Title1_Title2: "12sdf",
        Title1_Title3: "1376",
        Title2_Title1: "21yu",
        Title2_Title2: "22",
        Title2_Title3: "235",
        Title3_Title1: "31",
        Title3_Title2: "32",
        Title3_Title3: "33"
    };

    var matrixVal = 3;

    if (matrixVal != 0 || matrixVal != null) {
        var root = document.getElementById("traits_matrix_Div");
        var table = document.createElement('table');
        table.className = "difftable";
        var tblB = document.createElement('tbody');
        table.appendChild(tblB);

        var firstList = {};
        for (var x = 1; x <= matrixVal; x++) {
            firstList['Title' + x] = 'Title' + x;
        }
        myData = Object.values(firstList);

        var tr = document.createElement('tr');
        tr.appendChild(document.createElement('th'));

        for (var j = 0; j < matrixVal; j++) {
            var th = document.createElement('th');
            var text = document.createTextNode(myData[j]);
            th.appendChild(text);
            tr.appendChild(th);
        }

        tblB.appendChild(tr);

        for (var i = 0; i < matrixVal; i++) {
            var tr = document.createElement('tr');
            tblB.appendChild(tr);

            var td = document.createElement('td');
            var text = document.createTextNode(myData[i]);
            td.appendChild(text);
            tr.appendChild(td);

            var thisMatrix = JSON.stringify(json_data);

            var curcolumn = i + 1;

            for (var j = 0; j < matrixVal; j++) {
                var input = document.createElement("input");
                input.type = "text";
                if (typeof thisMatrix !== 'undefined') {
                    var curValue = "jsonVal";
                } else {
                    var curValue = "-"
                }
                var col = j + 1;
                if (i >= 0 && j >= 0) {
                    input.name = "Title" + curcolumn + "_Title" + col;
                    input.value = curValue;
                    input.id = "Title" + curcolumn + "_Title" + col;
                }
                const td = document.createElement('td');
                td.appendChild(input);
                tr.appendChild(td);
            }
        }
        root.appendChild(table);
    }

}

<body onload="setTrait_matrix()">
    <div id="traits_matrix_Div" style="visibility:visible" style="border: 1px; height:200px; align: center;"></div>
</body>

希望我不会感到困惑。请建议我！

Answer 1

function setTrait_matrix() {

    var json_data = {
        Title1_Title1: "11yty",
        Title1_Title2: "12sdf",
        Title1_Title3: "1376",
        Title2_Title1: "21yu",
        Title2_Title2: "22",
        Title2_Title3: "235",
        Title3_Title1: "31",
        Title3_Title2: "32",
        Title3_Title3: "33"
    };

    var matrixVal = 3;

    if (matrixVal != 0 || matrixVal != null) {
        var root = document.getElementById("traits_matrix_Div");
        var table = document.createElement('table');
        table.className = "difftable";
        var tblB = document.createElement('tbody');
        table.appendChild(tblB);

        var firstList = {};
        for (var x = 1; x <= matrixVal; x++) {
            firstList['Title' + x] = 'Title' + x;
        }
        myData = Object.values(firstList);

        var tr = document.createElement('tr');
        tr.appendChild(document.createElement('th'));

        for (var j = 0; j < matrixVal; j++) {
            var th = document.createElement('th');
            var text = document.createTextNode(myData[j]);
            th.appendChild(text);
            tr.appendChild(th);
        }

        tblB.appendChild(tr);

        for (var i = 0; i < matrixVal; i++) {
            var tr = document.createElement('tr');
            tblB.appendChild(tr);

            var td = document.createElement('td');
            var text = document.createTextNode(myData[i]);
            td.appendChild(text);
            tr.appendChild(td);

            var thisMatrix = JSON.stringify(json_data);

            var curcolumn = i + 1;

            for (var j = 0; j < matrixVal; j++) {
                var input = document.createElement("input");
                input.type = "text";
                if (typeof json_data["Title"+(i+1)+"_Title"+(j+1)] !== 'undefined') {
                    var curValue = json_data["Title"+(i+1)+"_Title"+(j+1)];
                } else {
                    var curValue = "-"
                }
                var col = j + 1;
                if (i >= 0 && j >= 0) {
                    input.name = "Title" + curcolumn + "_Title" + col;
                    input.value = curValue;
                    input.id = "Title" + curcolumn + "_Title" + col;
                }
                const td = document.createElement('td');
                td.appendChild(input);
                tr.appendChild(td);
            }
        }
        root.appendChild(table);
    }

}

<body onload="setTrait_matrix()">
    <div id="traits_matrix_Div" style="visibility:visible" style="border: 1px; height:200px; align: center;"></div>
</body>

我希望这会对您有所帮助。

Answer 2

我刚刚对您的代码进行了快速修复。您实际上并没有在任何地方调用JSON对象数据，所以...我只是这样称呼它：

--files

let box_value = json_data["Title" + curcolumn + "_Title" + col];
input.value = box_value?box_value:"-";

function setTrait_matrix() {

    var json_data = {
        Title1_Title1: "11yty",
        Title1_Title2: "12sdf",
        Title1_Title3: "1376",
        Title2_Title1: "21yu",
        Title2_Title2: "22",
        Title2_Title3: "235",
        Title3_Title1: "31",
        Title3_Title2: "32",
        Title3_Title3: "33",
        Title1_Title4: "1414141"
    };

    var matrixVal = 5;

    if (matrixVal != 0 || matrixVal != null) {
        var root = document.getElementById("traits_matrix_Div");
        var table = document.createElement('table');
        table.className = "difftable";
        var tblB = document.createElement('tbody');
        table.appendChild(tblB);

        var firstList = {};
        for (var x = 1; x <= matrixVal; x++) {
            firstList['Title' + x] = 'Title' + x;
        }
        myData = Object.values(firstList);

        var tr = document.createElement('tr');
        tr.appendChild(document.createElement('th'));

        for (var j = 0; j < matrixVal; j++) {
            var th = document.createElement('th');
            var text = document.createTextNode(myData[j]);
            th.appendChild(text);
            tr.appendChild(th);
        }

        tblB.appendChild(tr);

        for (var i = 0; i < matrixVal; i++) {
            var tr = document.createElement('tr');
            tblB.appendChild(tr);

            var td = document.createElement('td');
            var text = document.createTextNode(myData[i]);
            td.appendChild(text);
            tr.appendChild(td);

            var thisMatrix = JSON.stringify(json_data);

            var curcolumn = i + 1;

            for (var j = 0; j < matrixVal; j++) {
                var input = document.createElement("input");
                input.type = "text";
                if (typeof thisMatrix !== 'undefined') {
                    var curValue = "jsonVal";
                } else {
                    var curValue = "-"
                }
                var col = j + 1;
                if (i >= 0 && j >= 0) {
                    input.name = "Title" + curcolumn + "_Title" + col;
                    let box_value = json_data["Title" + curcolumn + "_Title" + col];
                    input.value = box_value?box_value:"-";

                    input.id = "Title" + curcolumn + "_Title" + col;
                }
                const td = document.createElement('td');
                td.appendChild(input);
                tr.appendChild(td);
            }
        }
        root.appendChild(table);
    }

}

将现有的json数据显示为表格

2 个答案: