javascript - 创建函数以使用 VARiable 中包含的 JSON 数据制作表格时出现问题

Question

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

我创建了一个 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
    }

但我不知道如何在函数中包含如何找到“派对”、“资历”等...我需要的字段，以及如何将它们包含在每个 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>

关于您的代码的备注:

1. 在下一行中，j 不存在(您可能指的是 i)。

   var i = 0; j < data.results[0].members.length; i++)
   

2. 考虑删除与代码明确作用相呼应的冗余注释，例如:

   document.createElement("tr"); //to create the tr element
   

3. tbody.appendChild(row) 不合适(应该在i 循环内——大括号缩进不准确可能造成混淆) .

4. 外层循环正确地尝试遍历行，但内层循环应该遍历您有兴趣创建的字段(列、单元格等)，而不是同时遍历行。

5. 避免使用全局变量；改用参数。该函数应该是一个黑盒子，当外部范围内的某些内容发生变化时不会被破坏。

6. 通过使用参数并让调用者处理有关数据和表格元素的细节，尝试使函数通用且可重用。

---

向后兼容版本:

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>