data.map() giving rows but not accessing values-CodePudding

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: '' }
}

CodePudding user response：

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