Question

我有一个看起来像这样的js对象：

{
  "id": 9,
  "user_name": "John Kim",
  "age": 25,
  "is_elig": true
}

我有一个应在其中填充数据的表，如下所示：

<table>
   <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Eligible</th>
   </tr>
   <tr>
      <td id="id"></td>
      <td id="user_name"></td>
      <td id="age"></td>
      <td id="is_elig"></td>
   </tr>
</table>

我在项目中使用JQuery，我想知道是否有一种方法可以遍历js对象并检查表td单元格ID中是否存在键。如果存在，则在单元格中填充值。

Answer 1

您可以迭代对象：

var obj = {
  "id": 9,
  "user_name": "John Kim",
  "age": 25,
  "is_elig": true
}

$.each(obj, function (key, value) { 
    $("#" + key).text(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
   <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Eligible</th>
   </tr>
   <tr>
      <td id="id"></td>
      <td id="user_name"></td>
      <td id="age"></td>
      <td id="is_elig"></td>
   </tr>
</table>

没有jQuery，这不会困难很多：

var obj = {
  "id": 9,
  "user_name": "John Kim",
  "age": 25,
  "is_elig": true
}

Object.entries(obj).forEach(([key, value]) => 
    document.getElementById(key).textContent = value
);

<table>
   <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Eligible</th>
   </tr>
   <tr>
      <td id="id"></td>
      <td id="user_name"></td>
      <td id="age"></td>
      <td id="is_elig"></td>
   </tr>
</table>

Answer 2

遍历对象：

let obj = {
  "id": 9,
  "user_name": "John Kim",
  "age": 25,
  "is_elig": true
}

Object.keys(obj).forEach(i => $('td#'+ i).text(obj[i]) );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
   <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Eligible</th>
   </tr>
   <tr>
      <td id="id"></td>
      <td id="user_name"></td>
      <td id="age"></td>
      <td id="is_elig"></td>
   </tr>
</table>

Answer 3

我认为当您说“循环js对象”时，您的意思是“循环js对象数组”。在这种情况下，您可能会执行以下操作：

<table>
   <tr id="tr_users">
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Eligible</th>
   </tr>
   <div id="tr_users"></div>
</table>

在您的js文件中：

var users = [];
var data = [ALL USERS IN ARRAY];

function setTable(data ) {
    data .forEach(u => {
        if(userIsNewInTable(u)) {
            users.push(u);          
        }
    });
    users.forEach(u => {
        appendInTable(u);
    });
}

function userIsNewInTable(user) {
    return !users.includes(user);
}

function appendInTable(value) {
    let htmlToInsert = "";
    htmlToInsert = `<tr>
          <td>${id}</td>
          <td>${user_name}</td>
          <td>${age}</td>
          <td>${is_elig}</td>
       </tr>`;
    $('#tr_users').append(htmlToInsert);
}

在这种方法中，我们声明一个空数组，该数组将被用户完全填充。我们有一个“ setTable”函数，它将接收所有数据（数据）的数组。它将遍历它们，并检查它们是否已经在用户数组中，以避免重复。完成迭代后，我们可以在HTML中插入所有“ td”。

请让我知道您是否正在寻找。希望它能对您有所帮助。

再见！

如何遍历js对象并填充表中的值？

3 个答案: