從陣列中獲取資訊并將其加載到表中

感謝您閱讀我的帖子！

我一直在嘗試創建一個函式，該函式將獲取員工資料陣列中的物件并將它們顯示在表格中。

在名為“system”的類中，我有 system.giveAllEmployees()，它回傳所有員工的陣列，而 system.giveAllOffers() 回傳已放入系統的所有活動報價。它應該全部組織在表employeeData中，并運行并查看每個員工分配了多少個offer，并將其添加到表中。它可以作業并加載到表中，但不是為每個員工更新報價，每當將新報價加載到系統時，它都會更新表中所有員工的報價編號。

我認為這是因為我如何設定回圈？但我真的很困惑為什么會這樣。我可以提供所需的任何其他資訊或代碼，如果有人知道將資料從陣列加載到表 id 的更好方法，我也很感激！

function loadAll() {
  var a      = system.giveAllEmployees();
  var b      = system.giveAllOffers();
  var tr     = "";
  var table  = document.getElementById("employeeData");
  let offers = 0;
  
  table.innerHTML = "";

  a.forEach( x => {   
    b.forEach( y => {
      if (x.employeeName === y.name) {
        offers  = 1;
      }
      return offers;
    }),
    tr  = '<tr>';
    tr  = '<td>'   x.name   '</td>' 
          '<td>'   x.document   '</td>' 
          '<td>'   x.departament   '</td>'
          '<td>'   x.age   '</td>' 
          '<td>'   offers   '</td>';
    tr  = '</tr>';
    offers = 0;
  })
  table.innerHTML  = tr;
}

對于背景關系，這是資料加載到的表的圖片：

再次感謝有關此問題的任何提示或幫助！

uj5u.com熱心網友回復：

我懷疑一個粗心的錯誤：

更改
if (x.employeeName === y.name) {
為
if (y.employeeName === x.name) {

完整代碼：
獲取資訊-> https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/insertRow

function loadAll()
  {
  const
    Employees = system.giveAllEmployees()
  , Offers    = system.giveAllOffers()
  , tableBody = document.querySelector('#employee-table > tbody')
    ;
  tableBody.innerHTML = '';

  Employees.forEach( emp => 
    {
    let newRow = tableBody.insertRow()

    newRow.insertCell().textContent = emp.name
    newRow.insertCell().textContent = emp.document
    newRow.insertCell().textContent = emp.departament
    newRow.insertCell().textContent = emp.age
    newRow.insertCell().textContent = Offers.filter(({employeeName:eNam})=>eNam===emp.name).length
    })
  }

演示（并向您展示如何為您的下一個問題做）

function loadAll()
  {
  const
    Employees = system.giveAllEmployees()
  , Offers    = system.giveAllOffers()
  , tableBody = document.querySelector('#employee-table > tbody')
    ;
    tableBody.innerHTML = '';

  Employees.forEach( emp => 
    {
    let newRow = tableBody.insertRow()

    newRow.insertCell().textContent = emp.name
    newRow.insertCell().textContent = emp.document
    newRow.insertCell().textContent = emp.departament
    newRow.insertCell().textContent = emp.age
    newRow.insertCell().textContent = Offers.filter(({employeeName: eNam})=>eNam===emp.name).length
    })
  }


// test datas
const system = 
  {
    giveAllEmployees() {
      return (
        [ { name: 'Joseph', document: '123456', departament : 'Artgas', age: 23 }
        , { name: 'Mary',   document: '666222', departament : 'Artgas', age: 41 }
      ] ) }
  , giveAllOffers() {
      return (
        [ { employeeName: 'Mary',   xxx: 'xxx' }
        , { employeeName: 'Joseph', zzz: 'zzz' }
        , { employeeName: 'Mary',   yyy: 'yyy' }
      ] ) }
  };

//  testing :
loadAll()

table#employee-table {
  font-family      : Arial, Helvetica, sans-serif;
  font-size        : 12px;
  border-collapse  : separate;
  border-spacing   : 1px;
  background-color : darkslategrey;
  } 
#employee-table th,
#employee-table td {
  background-color : whitesmoke;
  padding          : .3em .6em;
  text-align       : center;
  }

<table id="employee-table">
  <thead>
    <tr>
      <th>Employee Name</th> <th>Document</th> <th>Departement</th> <th>Age</th> <th>Number of Offers</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

標籤：javascript html 数组 数据表

上一篇：JS：從帶有陣列的json陣列中洗掉物件

下一篇：你能抓住rxjs過濾器，就像抓住一個左撇子一樣嗎