How to build dynamic html table using data from Map for node.js

I have a Map which had key and values, and I just want to store the map key and values in the html table by using the below code snippet.

Code:

 let counter = 0;

 let htmlTable =  "<table class='table table-hover'>"+
                             "<thead>"+
                             "<tr>"+
                             "<th scope='col'>#</th>"+
                             "<th scope='col'>Network Call</th>"+
                             "<th scope='col'>Duration</th>"+
                             "</tr>"+
                             "</thead>"+
                             "<tbody>"+
                             "<tr>"+
                             myMap.forEach(function(value, key) {
                                let array = key.split(":");
                                "<th scope='row'>"+`${counter++}`+"</th>"+
                                "<td>"+`${array[0]}`+"</td>"+
                                "<td>"+`${array[1]}`+"</td>"+
                                ""
                             })+
                             "</tr>"+
                             "</tbody>"+
                             "</table>"

Map data:

myMap.forEach (function(value, key) {
        console.log( "MAP"+ key + ' = ' + value);
      })

Output:

[0-0] MAP /token?re=prime&deviceId=:login = 555
[0-0] MAP /session-context/v1/bootstrap:login = 132
[0-0] MAP /configs/auth:login = 106

I just want to print the map data inside the <tr> row in the above code. But it returned 'undefined'. When I tried to iterate the above map and it had values, but Its not iterated when its called inside the html let variable.

I'm new to the .js and Is there any other way to call this or make it work ?

I believe this is what you are looking for:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

 const myMap = ['1:1','2:2']

 let htmlTable =  `<table class='table table-hover'>
                             <thead>
                             <tr>
                             <th scope='col'>#</th>
                             <th scope='col'>Network Call</th>
                             <th scope='col'>Duration</th>
                             </tr>
                             </thead>
                             <tbody>
                             <tr>
                             ${(myMap.map((value, key) => {
                                const array = value.split(":");
                                const newKey = key+1
                                return `<th scope='row'>${newKey}</th>
                                <td>${array[0]}</td>
                                <td>${array[1]}</td>`
                             })).join('')}
                             </tr>
                             </tbody>
                             </table>`
console.log(htmlTable)

<!-- end snippet -->

with map you return an array of strings and join will remove the commas that would appear after concatenating the strings.

This might work for you, I have not tested it but that is the idea. You give assign the first static part of the html code to htmlTable, then you dinamically assign the html code with the concatenated values and then final static part.
I am guessing that the key value is a string that goes something like this "FOO:BAR".
Hope it helps!

let counter = 0;
    
let htmlTable =  "<table class='table table-hover'>"+
                    "<thead>"+
                    "<tr>"+
                    "<th scope='col'>#</th>"+
                    "<th scope='col'>Network Call</th>"+
                    "<th scope='col'>Duration</th>"+
                    "</tr>"+
                    "</thead>"+
                    "<tbody>"+
                    "<tr>"
myMap.forEach(function(value, key) => {
  let array = key.split(":");
  htmlTable += 
    "<th scope='row'>"+(counter++) +"</th>"+
    "<td>"+array[0]+"</td>"+
    "<td>"+array[1]+"</td>"
})
htmlTable += "</tr>"+
               "</tbody>"+
               "</table>"