Question

我正在尝试学习如何创建Javascript函数，以便以HTML格式创建表格，其中包含从JSON文件中提取的一些数据。我很想得到一点光...

我创建了一个JS文件，将JSON数据存储到一个变量中，它的部分显示在这里：

var data = {
   "status":"OK",
   "copyright":" Copyright (c) 2019 Pro Publica Inc. All Rights Reserved.",
   "results":[
      {
         "congress": "113",
         "chamber": "Senate",       
         "num_results": 105,
         "offset": 0,
         "members": [
              {
                 "id": "A000360",
                 "title": "Senator, 2nd Class",
                 
                 "first_name": "Lamar",
                 "party": "R",
                 "leadership_role": null,
                 "twitter_account": "SenAlexander",
                 "seniority": "11",
                 "phone": null,
                 "fax": null,
                 "state": "TN",
                 "votes_with_party_pct": 85.97
               },
                           {
                 "id": "A000368",
                 "title": "Senator, 3rd Class",
                 "first_name": "Kelly",
                 "party": "R",

我创建了一个HTML文件，其中包含一个元素和一个内部，打算在其中插入表格。

<table>
           <thead>
            <tr>
                <th>Name</th>
                <th>Party</th>
                <th>State</th>
                <th>Years in Office</th>
            </tr>
            </thead>
            <tbody id="senate-data">

            </tbody>
        </table>

现在我正在尝试创建合适的JS函数来填充表格。但是，我完全无法猜测应该创建哪个变量以及如何提取所需的元素（“ first_name”，“ party”，“ state”和“ seniority”）。到目前为止，我所做的是

function createTable() {
    var tbody = document.getElementById("senate-data"); //to reference the tbody element 
    
    
    for (var i = 0; j < data.results[0].members.length; i++) {// to loop over the whole members array
        var row = document.createElement("tr"); //to create the tr element
        
        for (var j = 0; j < data.results[0].members.length; j++) {
            var cell = document.createElement("td")//to create the table cells
            var cellText = document.createTextNode() //to create the text content of the cells
            cell.appendChild(cellTex);//to add the text to the TD
            row.appendChild(cell)//to add the TD to the TR
        }
     
        }   
    tbody.appendChild(row)//to add the row to the tbody
    }

但是我不知道如何在函数中包括如何找到我需要的“ party”，“ seniority”等...字段，以及如何将其包含在每个TD元素中。

任何帮助将不胜感激。

Answer 1

以下内容如何：

const data = { "status": "OK", "copyright": " Copyright (c) 2019 Pro Publica Inc. All Rights Reserved.", "results": [{ "congress": "113", "chamber": "Senate", "num_results": 105, "offset": 0, "members": [{ "id": "A000360", "title": "Senator, 2nd Class", "first_name": "Lamar", "party": "R", "leadership_role": null, "twitter_account": "SenAlexander", "seniority": "11", "phone": null, "fax": null, "state": "TN", "votes_with_party_pct": 85.97 }] }] };

const createTable = (tbody, data, fields) => {  
  for (const elem of data) {
    const row = document.createElement("tr");
    tbody.appendChild(row);
    
    for (const field of fields) {
      const cell = document.createElement("td");        
      row.appendChild(cell);
      cell.innerText = elem[field];
    }    
  }
};

createTable(
  document.getElementById("senate-data"), data.results[0].members, 
  ["first_name", "party", "state", "seniority"]
);

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Party</th>
      <th>State</th>
      <th>Years in Office</th>
    </tr>
  </thead>
  <tbody id="senate-data">

  </tbody>
</table>

关于您的代码的注释：

在下面的行中，j不存在（您可能是说i）。
```
var i = 0; j < data.results[0].members.length; i++)
```
考虑删除多余的注释，这些注释会回显代码明确执行的操作，例如：
```
document.createElement("tr"); //to create the tr element
```
tbody.appendChild(row)不合适（应该在i循环内-大括号的不正确缩进可能引起混乱）。
外部循环正确地尝试遍历行，但是内部循环应该遍历您想要创建的字段（列，单元格等），而不是遍历行。
避免使用全局变量；使用参数代替。该功能应该是一个黑盒子，当外部范围中的某些内容发生变化时，它不会被破坏。
通过使用参数并让调用方处理有关数据和表元素的细节，尝试使该函数具有通用性和可重用性。

向后兼容版本：

var data = { "status": "OK", "copyright": " Copyright (c) 2019 Pro Publica Inc. All Rights Reserved.", "results": [{ "congress": "113", "chamber": "Senate", "num_results": 105, "offset": 0, "members": [{ "id": "A000360", "title": "Senator, 2nd Class", "first_name": "Lamar", "party": "R", "leadership_role": null, "twitter_account": "SenAlexander", "seniority": "11", "phone": null, "fax": null, "state": "TN", "votes_with_party_pct": 85.97 }] }]};

function createTable(tbody, data, fields) {  
  data.forEach(function (elem) {
    var row = document.createElement("tr");
    tbody.appendChild(row);
    
    fields.forEach(function (field) {
      var cell = document.createElement("td");
      row.appendChild(cell);
      cell.innerText = elem[field];
    });
  });
}

createTable(
  document.getElementById("senate-data"), data.results[0].members, 
  ["first_name", "party", "state", "seniority"]
);

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Party</th>
      <th>State</th>
      <th>Years in Office</th>
    </tr>
  </thead>
  <tbody id="senate-data">

  </tbody>
</table>

经典的for循环版本（不推荐；更容易出错，也更难看）：

var data = { "status": "OK", "copyright": " Copyright (c) 2019 Pro Publica Inc. All Rights Reserved.", "results": [{ "congress": "113", "chamber": "Senate", "num_results": 105, "offset": 0, "members": [{ "id": "A000360", "title": "Senator, 2nd Class", "first_name": "Lamar", "party": "R", "leadership_role": null, "twitter_account": "SenAlexander", "seniority": "11", "phone": null, "fax": null, "state": "TN", "votes_with_party_pct": 85.97 }] }]};

function createTable(tbody, data, fields) {  
  for (var i = 0; i < data.length; i++) {
    var row = document.createElement("tr");
    tbody.appendChild(row);
    
    for (var j = 0; j < fields.length; j++) {
      var cell = document.createElement("td");
      row.appendChild(cell);
      cell.innerText = data[i][fields[j]];
    }
  }
}

createTable(
  document.getElementById("senate-data"), data.results[0].members, 
  ["first_name", "party", "state", "seniority"]
);

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Party</th>
      <th>State</th>
      <th>Years in Office</th>
    </tr>
  </thead>
  <tbody id="senate-data">

  </tbody>
</table>

创建函数以使用VARiable

1 个答案: