jquery显示正确的表序列答案

【问题标题】：jquery display correct table Sequencejquery显示正确的表序列
【发布时间】：2020-11-06 20:48:45
【问题描述】：

我在 javascript 中遇到问题，我想在表中显示一列 Success/Fail，但它们在表中显示了两列.. 它们在 Success/Fail 列中没有显示正确的值。

我该怎么办？有人帮我吗？

        var responseList = [{
            "summary": {
                "template_name": "test",
                "success": "2",
                "fail": "1",
            },
            "summary": {
                "template_name": "test",
                "success": "3",
                "fail": "2",
            },

        }];


        var table = document.querySelector('#my-table');
        var tbody = document.createElement('tbody');
        table.appendChild(tbody);


        for (var i = 0; i < responseList.length; i++) {

            var tr = tbody.insertRow();

            var summary = responseList[i]["summary"];
            console.log(summary);
            for (var key in summary) {
                if (summary.hasOwnProperty(key)) {
                    console.log(key + " -> " + summary[key]);
                    var td = tr.insertCell();
                    td.innerHTML = summary[key];
                      if(key == "success" || key == "fail"){
                      // console.log("success",summary[key]);
                      // console.log("fail",summary[key]);
                      var td = tr.insertCell();
                      td.innerHTML = `${summary[key]} Successful / ${summary[key]} Failed`;
                      }

                }
            }
        }

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>

</head>

<body>
    <table id="my-table" border="0">
        <thead>
            <tr>
                <th>Template name</th>
                <th>Success</th>
                <th>Success/Fail</th>
                <th>Fail</th>
                <th>Success/Fail</th>
            </tr>
        </thead>


    </table>
</body>

</html>

【问题讨论】：

您想要实现的目标在您的查询中并不清楚。改为添加所需的输出。
好的，我将分享预期的输出@
我添加了一张照片预期的输出。你可以查看@
你能理解想要的输出吗？ @
所需的操作标题与您在查询 html 中提到的表格标题不匹配

标签： javascript html jquery json html-table

【解决方案1】：

您的尝试对于它需要做的事情有点复杂，在循环中迭代摘要对象的键以构建表没有太多价值。正如我在下面所做的那样，直接访问密钥要简单得多。

var responseList = [
    {
        "template_name": "test",
        "success": "2",
        "fail": "1",
    },
    {
        "template_name": "test",
        "success": "3",
        "fail": "2",
    },
];

var table = document.querySelector('#my-table');
var tbody = document.createElement('tbody');
table.appendChild(tbody);

responseList.forEach(summary => {
  var tr = tbody.insertRow();
  tr.insertCell().innerHTML = `${summary.template_name}`
  tr.insertCell().innerHTML = `${summary.success}`
  tr.insertCell().innerHTML = `${summary.fail}`
  tr.insertCell().innerHTML = `${summary.success}/${summary.fail}`
})

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>

</head>

<body>
    <table id="my-table" border="0">
        <thead>
            <tr>
                <th>Template Name</th>
                <th>Success</th>
                <th>Fail</th>                
                <th>Success/Fail</th>
            </tr>
        </thead>


    </table>
</body>

</html>

【讨论】：