代码之家 › 专栏 › 技术社区 › espresso_coffee

如何循环JS对象并在表中填充值?

jquery javascript

espresso_coffee · 技术社区 · 7 年前

我有一个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 cell id中。如果确实存在,则填充该单元格中的值。

3 回复 | 直到 7 年前

LLeon 7 年前

遍历对象:

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>

trincot 7 年前

您可以迭代对象:

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>

bautigaraventa 7 年前

我认为当你说“循环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);
}

在这种方法中,我们将声明一个空数组,该数组将充满用户。我们有一个“可设置”的函数,它将接收所有数据(数据)的数组。它将对它们进行迭代,并检查它们是否已经在用户数组中,以避免重复。一旦我们完成了迭代,我们就可以用所有“td”插入HTML。

如果这是你要找的,请告诉我。我希望它能帮助你。

再见!