Click here to Skip to main content
16,016,777 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello guys, I'm trying consistently to use a map() method in order to populate the rows of a table in Javascript. I setup the table for the HTML part in the index file and now I want to get the table populated with the data coming from an array that I previosly created. The code I write so far is this but there are few problems:

1 - the callback function get the data as undefined;
2 - I need to manage the missings, I mean for example if I have only two arrays the table should be populated just with the values of these two and nothing more ( ' ' ). Now when I got to test with 1 array I have the same array values in all the table.

I hope I was clear enough with the info in the question... the code and the arrays are below.

THIS IS THE ARRAYS I HAVE. EACH STRING SHOULD BE A COLUMN VALUE.
[
  [ 'TD02', '2019-12-21', '30.71', 'GEA 2 s.r.l.', 'RENATO' ],
  [ 'TD01', '2019-12-21', '30.71', 'GEA 2 s.r.l.', 'RENATO' ]
]


HERE IS THE CODE

JavaScript
function componiTabella(dati){
      
      const data ={
      headers: ["TipoDoc.","DataDoc.","Importo","CedentePrestatore","CessionarioCommittente"],
      rows: new Array(10).fill(undefined).map(callbackFn(dati)) 
      
    };
 
    function callbackFn(dati){
      
       for (i=0; i<10;i++){
        for(j=0;j<10;j++){
          if (dati[i][j]== ' ')
             return [' ' , ' ' ,' ' ,' ' ,' ']
          else 
          return [dati[i][j],dati[i][j+1],dati[i][j+2],dati[i][j+3],dati[i][j+4],dati[i][j+5]]

       }

      }
    }
   

    app.get("/data",(req,res)=>{
      res.json({
          headers:data.headers,
          rows:data.rows,
          lastUpdated: new Date().toISOString()
      });
    });


What I have tried:

I tried to wrap the callback function to return in the map() method;
Tried to return the values, but got undefined with "dati";
Tried to return one single value dati[0][0], I got just one column filled but all with the same value.
Tried the for loop in the functions but I suppose it is not the right path.
Posted
Updated 22-Jun-22 22:31pm
v2

1 solution

Quote:
JavaScript
.map(callbackFn(dati))
You are not passing the callbackFn function as the callback to the map function.

Instead, you are calling the callbackFn once, passing in the (undefined) variable <codee>dati as the parameter. You are then passing the value returned from the <code>callbackFn as the callback to the map function.

Change your code to pass the callback correctly:
JavaScript
.map(callbackFn)
 
Share this answer
 
Comments
JackF007 23-Jun-22 5:35am    
Do you mean change the map call to ".map(callbackFn)" ? When I will return the dati[i][j] with that loop, will they populate the table properly given my input ['TD02', '2019-12-21', '30.71', 'GEA 2 s.r.l.', 'RENATO']? Like column 1 is TD02, coulumn 2 is 2019-12-21 etc?? And how to manage empy rows so that they will not be populated?


Thanks!!!!
Richard Deeming 23-Jun-22 5:49am    
Yes, as I said in my answer: pass the callback function as a function, rather than calling it once and passing the returned value as the callback function.
.map(callbackFn)

Callback function - MDN Web Docs Glossary: Definitions of Web-related terms | MDN[^]

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900