在html表中打印Json数据

Question

我正在解决这个问题，其中我在html表中打印json数据。我几乎已经知道尝试过，但是失败了。我想要的是将JSON文件中存在的User_info->数据打印到我的html表列名称DATA中。那如果在User_info中有两个数组，它将在css flex中得到打印。这样我就可以将它分配给user_info对象。 我的代码中的错误是它相互向下打印。我正在编写的JS代码困扰着下一个。 由于这个js代码，我的第二个Qid_info详细信息值正在打印对应于User_info的第二个数组。 HTML

  <table id='userdata'>
        <thead>
            <tr>
                <th colspan="2" id="ct">CT INFO</th>
                <th colspan="4" id="que">Question</th>
                <th colspan="4" id="user">User Info</th>
            </tr>
            <tr>
                <th>CT ID</th>
                <th>CT</th>
                <th>Id</th>
                <th>isActive</th>
                <th>is Complex</th>
                <th>is Breakdown</th>
                <th>ID</th>
                <th>NAME</th>
                <th>Data</th>
                <th>updatedAt</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

这是JS

 $(function () {
        var people = [];
        var ctCells = [], questionCells = [], userCells = [];
        var $tBody = $("#userdata tbody");
        $.getJSON('https://api.myjson.com/bins/18g7fm', function (data) {
            $.each(data.ct_info, function (i, f) {
                ctCells.push(`<td id=${f.id}>${f.id}</td><td>${f.name}</td>`);
                var users = []
                var question = []
                f.Qid_info.forEach((x) => {
                    x.user_info.forEach((y) => {
                        //avoid duplicates
                        var foundUser = users.find((user) => {
                            return user.id === y.id
                        })
                        if (!foundUser) {
                            users.push(y)
                        }
                    })
                })
                f.Qid_info.forEach((x) => {
                    var foundQuestion = question.find((questions) => {
                        return questions.id === x.id
                    })
                    if (!foundQuestion) {
                        question.push(x)
                    }
                })
                $.each(question, function (i, question) {
                    ctCells.push(`<td colspan="2">&nbsp;</td>`)
                    questionCells.push(`<td id=${question.id}>${question.id}</td><td>${question.isActive}</td><td>${question["is complex"]}</td><td>${question["is breakdown"]}</td>`);

                })
                console.log(users)
                $.each(users, function (i, user) {
                    // for (var key in user.data) {
                    //     var value = user.data[key].git_ids;
                    // }

                    var a = user.data.map(function (key) {
                        console.log(key)
                        return key
                    })
                    ctCells.push(`<td colspan="2">&nbsp;</td>`)
                    questionCells.push(`<td colspan="4">&nbsp;</td>`)
                    userCells.push(`<td id=${user.id}>${user.id}</td><td>${user.name}</td><td id="scrlSec">${a.map(value => {

                        return `<div class="colOne flex-container">
                                <table id="tb1">
                                    <tr>
                                        <td><input type="checkbox" style="display: inline;"> </td>
                                        <td> <span id="text">${Object.keys(value)[0]}</span></td>
                                        <td> <textarea type="text" class="gitplc" placeholder="GitId">${ value.git_ids}</textarea> </td>
                                    </tr>
                                </table>
                            </div>
                            </div>`
                    })
                        }</td><td>${user.updatedAt}</td>`);
                })
            });     
            $.each(ctCells, function (i) {

                $tBody.append(`<tr>${ctCells[i]}${questionCells[i]}${userCells[i]}</tr>`)
            })


        });
    });

这是CSS

   #scrlSec {
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;

    }

    /* .checkSec { width: 60%;  } */
    .checkSec .tbl {
        padding-top: 20px;
    }

    .checkSec td {
        padding-left: 10px;
    }

    .checkSec .btnGreen {
        color: white;
        background-color: #4CAF50;
        border: none;
        padding: 15px 32px;
        width: 100%;
        text-decoration: none;
    }

    .checkSec .gitplc {
        width: 80%;
    }

    .checkSec #text {
        font-size: 14px;
    }

    .checkSec .tbl .colOne {
        width: 50%;
        float: left;
    }

    .checkSec .tbl .colTwo {
        width: 50%;
        float: right;
    }

    #user {
        overflow: auto;
    }
.flex-container {
  display: flex;
}
    th,
    td {
        font-weight: normal;
        padding: 5px;
        text-align: center;
        width: 120px;
        vertical-align: top;
    }

    th {
        background: #00B0F0;
    }

    tr+tr th,
    tbody th {
        background: #DAEEF3;
    }

    tr+tr,
    tbody {
        text-align: left
    }

    table,
    th,
    td {
        border: solid 1px;
        border-collapse: collapse;
        table-layout: fixed;
    }