data.map() giving rows but not accessing values

Question

I don't know what I am i doing wrong here, but I'm able to iterate through the rows but cannot access the values in the objects when I map() through them. Can someone help out? The thing i am trying to achieve is to embed this table which is created, into my HTML template for nodemailer to send a mail. But unfortunately, I'm not able to write the rows for the table since the values are undefined. But the filtered.map(el,index) 'el' logs the individual rows.

const result = results.rows
          console.log(result);
          let filtered = {};
            teams.map(team=>{
              filtered[team.value] = {
                  nvCount: 0,
                  nvTaken: 0,
                  vCount: 0,
                  vTaken: 0,
                  team:''
              };
            });

        
        result.map(user => {
          if (user.preference.includes("NON-VEG")) {
            filtered[user.team].nvCount += 1; 
            filtered[user.team].team = String(user.team)
            if (user.taken === true) {
              filtered[user.team].nvTaken += 1;
            }
          } else if (user.preference.includes('VEG')) {
              filtered[user.team].vCount += 1;
              if (user.taken === true) {
                filtered[user.team].vTaken += 1;
            }
          }
          else{
            console.log('Skipped');
          }
        });

    let tableData = (
    '<table>' +
      '<thead>' +        
          '<th>Team</th>' +
          '<th>Non-Veg</th>' +
          '<th>Veg</th>' +
          '<th>Total</th>' +      
      '</thead>'
    ); 
    
    {[filtered]?.map((el, index) => {
      console.log(el);//gives rows
      console.log(el.nvCount);//undefined
      tableData += (
        '<tr>' +
          '<td>' + el.team + '</td>' +
          '<td>' + el.nvCount + '</td>' +
          '<td>' + el.vCount + '</td>' +
          '<td>' + el.nvCount + el.vCount + '</td>' +
        '</tr>'
      );
   
    }) 
  }  
    
    tableData +=  '</table>';

result of console.log(el):

{
  Greeters: { nvCount: 2, nvTaken: 1, vCount: 0, vTaken: 0, team: 'Greeters' },
  Cleaning: { nvCount: 1, nvTaken: 0, vCount: 0, vTaken: 0, team: 'Cleaning' },
  Media: { nvCount: 0, nvTaken: 0, vCount: 1, vTaken: 0, team: '' },
  Intercession: { nvCount: 0, nvTaken: 0, vCount: 0, vTaken: 0, team: '' },
  'Kids-Church': { nvCount: 0, nvTaken: 0, vCount: 0, vTaken: 0, team: '' },
  Kitchen: { nvCount: 0, nvTaken: 0, vCount: 0, vTaken: 0, team: '' }
}

Answer 1

Since filtered is an object you should use a for ... in loop to iterate over its keys:

let tableData =
  '<table>' +
  '<thead>' +
  '<th>Team</th>' +
  '<th>Non-Veg</th>' +
  '<th>Veg</th>' +
  '<th>Total</th>' +
  '</thead>';

{
  for (const key in filtered) {
    const el = filtered[key];
    tableData +=
      '<tr>' +
      '<td>' +
      el.team +
      '</td>' +
      '<td>' +
      el.nvCount +
      '</td>' +
      '<td>' +
      el.vCount +
      '</td>' +
      '<td>' +
      el.nvCount +
      el.vCount +
      '</td>' +
      '</tr>';
  });
}

tableData += '</table>';