如何使用Map for node.js中的数据构建动态html表

pod7payv 于 2023-04-20 发布在 Node.js

关注(0)|答案(2)|浏览(103)

我有一个Map，它有键和值，我只想通过使用下面的代码片段将Map的键和值存储在HTML表中。
验证码：

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数据：

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

输出：

[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

我只是想打印上面代码中的行内的map数据。但它返回了'undefined'。当我试图迭代上面的map时，它有值，但当它在html let变量中调用时，它没有迭代。
我是.js的新手，还有其他方法可以调用它或使其工作吗？

node.js

来源：https://stackoverflow.com/questions/76057761/how-to-build-dynamic-html-table-using-data-from-map-for-node-js

2条答案

按热度按时间

bejyjqdl1#

我相信这就是你正在寻找的：

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)

使用map，你返回一个字符串数组，join将删除连接字符串后出现的逗号。

赞(0）回复(0）举报 2023-04-20

dy2hfwbg2#

这可能对你有用，我还没有测试过，但这就是我的想法。你给予html代码的第一个静态部分赋值给htmlTable，然后你用连接的值和最后的静态部分来动态地赋值html代码。我猜key的值是一个类似于"FOO:BAR"的字符串。希望它有帮助！

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>"
})
htmlElement += "</tr>"+
               "</tbody>"+
               "</table>"

赞(0）回复(0）举报 2023-04-20

我来回答

如何使用Map for node.js中的数据构建动态html表

2条答案

相关问题

热门标签

最新问答