在控制台中打印VALUE，但在DOM中未定义

Question

我正在使用JS在html table中打印数据。但是当我尝试object.value时，我在dom中未定义，但是控制台正在打印这些值。如果列的对应值是true或打印false，我想打印true。但是，当我在控制台中打印它们时，它可以工作，但在dom中却不打印

function get_testser_info() {
  $.ajax({
      type: 'GET',
      url: 'https://api.myjson.com/bins/6yx7o',
      data: {
        get_param: 'value'
      },
      dataType: 'json',
      success: function(data) {
          var people = [],
            ctCells = [],
            questionCells = [],
            userCells = [],
            $tBody = $("#userdata tbody");

          $.each(data, function(i, f) {
            var users = []
            var question = []
            f.user_info.forEach((x) => {
              var foundUser = users.find((user) => {
                return user.id === x.id
              })
              if (!foundUser) {
                // console.log("i am 1 x ", x)
                users.push(x)
              }
            })

            f.user_info.forEach((x) => {
              var foundQuestion = question.find((questions) => {
                return questions.id === x.id
              })
              if (!foundQuestion) {
                // console.log("i am x " , x);
                question.push(x)
              }
            })

            ctCells.push(`<td colspan="0">&nbsp;</td>`)
            questionCells.push(`<td id=${f.id}>${f.id}</td><td>${f.is_active}</td><td>${f["is_complex"]}</td><td>${f.is_broken_down_specific}</td><td>
         

                ${f.user_info.map(valueData => {
            return `<div class="tdContent " style="display: inline; display:inline-flex; flex-direction:column;border-right: 1px solid;padding-right: 10px; width:500px;">
                        <div style="text-align:left"><b style="color: red">Id</b>&nbsp;&nbsp${valueData.user_id}<br><b style="color: red">Name</b>&nbsp;&nbsp${valueData.name}</div>
                        <div style="text-align:left"><b></b>&nbsp;&nbsp${new Date(valueData.updated_at)}</div>
                        
                        <div class="content">
                        <div class="ct_name" style="display: inline-grid;">
                                <div style="width: 150px; margin-left: 10px;  "><span style="text-transform: capitalize; white-space: initial;"> Range Issue </span></div>
                                <div style="width: 150px; margin-left: 10px;  "><span style="text-transform: capitalize; white-space: initial;"> answer_interchange</span></div>
                                <div style="width: 150px; margin-left: 10px; "><span style="text-transform: capitalize; white-space: initial;">end_of_question </span></div>
                                <div style="width: 150px; margin-left: 10px; "><span style="text-transform: capitalize; white-space: initial;"> prefix_answer </span></div>
                                <div style="width: 150px; margin-left: 10px; "><span style="text-transform: capitalize; white-space: initial;"> postfix_answer </span></div>
                                <div style="width: 150px; margin-left: 10px; "><span style="text-transform: capitalize; white-space: initial;">grammer_mistakes</span></div>
                                <div style="width: 150px; margin-left: 10px; "><span style="text-transform: capitalize; white-space: initial;">calculation_mistake</span></div>
                                <div style="width: 150px; margin-left: 10px; "><span style="text-transform: capitalize; white-space: initial;"> fig_question</span></div>
                                <div style="width: 150px; margin-left: 10px; "><span style="text-transform: capitalize; white-space: initial;"> fig_solution </span></div>
                                <div style="width: 150px; margin-left: 10px; "><span style="text-transform: capitalize; white-space: initial;">different_options</span></div>
                                <div style="width: 150px; margin-left: 10px; "><span style="text-transform: capitalize; white-space: initial;">hint</span></div>
                                <div style="width: 150px; margin-left: 10px; "><span style="text-transform: capitalize; white-space: initial;">sub_parts_questions </span></div>
                                <div style="width: 150px; margin-left: 10px; "><span style="text-transform: capitalize; white-space: initial;"> ambiguity_in_answer</span></div>
                      
                        </div> 
                        <div class="tick" style="display: inline;">
                      ${
                        valueData.data.forEach(val => {
                          if(typeof(Object.values(val)[0])=== "boolean"){
                            console.log("first",Object.values(val)[0])
                           
                          }
                          if(typeof(Object.values(val)[1])==="boolean") {
                            // console.log("first",Object.values(val)[1])
                            `${Object.values(val)[1]}</div>`
            }
          })
        } <
        /div> <
        div class = "num"
      style = "display: inline;" >
      number <
      /div> <
      /div> <
      /div>

      `
                                    
                       
                                     
                                   
          })
            }
                        </div></td>`) // end of return
  });

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


}
}); //ajax end 

}

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


/* .checkSec { width: 60%;  } */

#userdata {
  background-color: #f1f1f1;
}

#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="4" id="que">Question</th>
      <th id="user">User Info</th>
    </tr>
    <tr>
      <th>Id</th>
      <th>isActive</th>
      <th>is Complex</th>
      <th>is Breakdown</th>
      <th>USER</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>