Question 42513 in Html Question posted in
Some basic documentation can be found here.

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 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 ?

Tags:

2

Answers


  1. 0

    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>"
    Login or Signup to reply.
  2. 0

    I believe this is what you are looking for:

     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)

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search