javascript - 在 Dom 中未定义，但在 Console 中可用值

Question

 $(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>`);

                })
               
                $.each(users, function (i, user) {
                    var a = user.data.map(function (key) {
                        return key
                    })
                
                    // ctCells.push(`<td colspan="2">&nbsp;</td>`)
                    // questionCells.push(`<td colspan="${lent+1}">&nbsp;</td>`)
                    
                    userCells.push(`<td><div style="display:flex; flex-direction:row">
                        ${
                            users.forEach(val => {
                                `<div style="display:flex; flex-direction:column">
                                  <div>${val.id}${val.name}</div>
                                    <div>${val.updatedAt}</div>
                                    <div style="display:flex; flex-direction:column">
                                      
                                            ${user.data.forEach(IN => {
                                               `  
                                                <div style="display:flex; flex-direction:row">
                                                  <div><p>${console.log(IN.git_ids)}</p></div>
                                                
                                                    </div>
                                                    
                                                    `
                                            })}
                                        </div>
                                    </div>`
                            })
                        }
                        </div></td>`)
                //     userCells.push(`<td id=${user.id}>UserId---&nbsp;&nbsp;${user.id}&nbsp;&nbsp; UserName----&nbsp;&nbsp;${user.name}${a.map(value => {
                //         return `
                //                 <div id="${user.id}" >
                //                         <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> j
                //                 </div>
                //           `
                //     })
                //         }</td><td>${user.updatedAt}</td>`);
                })
            });
        console.log(userCells)
            $.each(ctCells, function (i) {
        console.log(userCells)
                
                $tBody.append(`<tr>${ctCells[i]}${questionCells[i]}${userCells[i]}</tr>`)
            })


        });
    });

 #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;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='userdata'>
        <thead>
            <tr>
                <th colspan="2" id="ct">CT INFO</th>
                <th colspan="4" id="que">Question</th>
                <th 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>USER</th>
                
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

我正在 html 中以表格格式打印 json 数据。但在用户列中，我未定义，但是当我在控制台中打印这些变量时，它打印了正确的值。 这是我的 json api 。当我在用户的 foreach 循环中打印值时，我得到了未定义的值，但在 console.log 上，我在控制台中打印了正确的值。 https://api.myjson.com/bins/18g7fm

Answer 1

发生这种情况是因为您在模板文字中使用了 forEach() 。 forEach() 默认返回未定义。请改用 map() 函数。

userCells.push(`<td><div style="display:flex; flex-direction:row">
                        ${
                            users.map(val => {
                                return `<div style="display:flex; flex-direction:column">
                                  <div>${val.id}${val.name}</div>
                                    <div>${val.updatedAt}</div>
                                    <div style="display:flex; flex-direction:column">

                                            ${user.data.map(IN => {
                                              return `  
                                                <div style="display:flex; flex-direction:row">
                                                  <div><p>${console.log(IN.git_ids)}</p></div>

                                                    </div>

                                                    `
                                            })}
                                        </div>
                                    </div>`
                            })
                        }
                        </div></td>`)