thanks for reading my post!

I've been trying to create a function that will take the objects in an array of employee data and display them in a table.

Within the class called 'system', I have system.giveAllEmployees(), which returns the array of all the employees, while system.giveAllOffers() returns all the active offers that have been put in the system. It should all be organized in the table employeeData, and run through and see how many offers each employee is assigned to, and add that to the table as well. It works and loads to the table but instead of updating the offer for each employee, whenever a new offer is loaded to the system it updates the offer number for all the employees in the table.

I assume this is because of how i set up the loop? but i'm really stumped as to why this is happening. I can provide any other information or code needed, if anyone knows a better way to load data from arrays into a table id appreciate that as well!

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;
}

And for context, here's a picture of the table the data is loaded into:

Thanks again for any tips or help on this issue!

CodePudding user response：

I suspect a careless error:

change
if (x.employeeName === y.name) {
to
if (y.employeeName === x.name) {

full code:
for info -> 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
    })
  }

Demo (and to show you how to do for your next questions)

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>