js 将json 数据转HTML table
我有一段json数据，想转化成tale，需要返回 HTML字符串。 html中最好包含 thead和 tbody，能否帮封装一个函数，传入json数据，自动返回一段 HTML字符串的表格`data = [
{"name":"1","score":"11","ping":"16"},
{"name":"2","score":"12","ping":"17"},
{"name":"3","score":"13","ping":"18"},
{"name":"4","score":"14","ping":"19"},
{"name":"5","score":"15","ping":"20"},
]` ```js
data = [
{ "name": "10", "score": "11", "ping": "16" },
{ "name": "20", "score": "12", "ping": "17" },
{ "name": "30", "score": "13", "ping": "18" },
{ "name": "40", "score": "14", "ping": "19" },
{ "name": "50", "score": "15", "ping": "20" },
]
function JSONtoHTML(data) {
const head = [...new Set(data.flatMap(i => Object.keys(i)))]
const index = Object.fromEntries(head.map((i, ii) => ))
const headText = head.map(i => ` <th>${i}</th>`).join('\n')
const tableHead = `<tr>\n${headText}\n</tr>`
const formatData = data.map(i => Object.entries(i)).map(i => i.reduce((prev, ) => (prev] = item, prev), [...new Array(head.length)]))
const tableBody = formatData.map(i => i.map(n => ` <td>${n}</td>`).join('\n')).map(i => `<tr>\n${i}\n</tr>`).join('\n')
const html = `<table>\n${tableHead}\n${tableBody}\n</table>`
constole.log(html)
return html
}
JSONtoHTML(data)
```
用了很多语法糖 本帖最后由 Major 于 2023-2-18 13:57 编辑
data = [
{"name":"10","score":"11","ping":"16"},
{"name":"20","score":"12","ping":"17"},
{"name":"30","score":"13","ping":"18"},
{"name":"40","score":"14","ping":"19"},
{"name":"50","score":"15","ping":"20"},
]
function jsonToTableStr(data){
if(data.length){
// 根据第一行获取表头
let a = data;
let thead_th = "<th>" + " 序号"+ "</th>";
for(let key in a){
console.log(key)
thead_th =thead_th + "<th>" + key + "</th>"
};
let thead_tr = "<tr>" + thead_th + '</tr>'
let thead = '<thead id = "thead0"> ' + thead_tr + ' </thead>'
// console.log(thead)
// 获取表格内容
let tbody_tr_list = ''
let num = 0;
data.forEach(item => {
num += 1;
let tbody_th = '<th>' + num + '</th>';
for(let key in item){
tbody_th = tbody_th + '<th>' + item + '</th>'
};
let tbody_tr = "<tr>" + tbody_th + '</tr>';
tbody_tr_list += tbody_tr
});
let tbody = '<tbody id = "tbody0">' + tbody_tr_list + '</tbody>'
// console.log(tbody)
// 拼接表格
let table_start = '<table id = "batle_id_teshu"border=1 cellspacing=0 style="margin-left:auto; margin-right:auto;white-space: nowrap" >';
let table_content = thead + tbody
let table_end = '</table>'
let table = table_start + table_content + table_end
// console.log(table);
return table
};
};
jsonToTableStr(data)
为什么不试试神奇的 jsx 呢
```txt
// main.tsx
import React from 'react';
import ReactDOMServer from 'react-dom/server';
const list = [
{ name: '10', score: '11', ping: '16' },
{ name: '20', score: '12', ping: '17' },
{ name: '30', score: '13', ping: '18' },
{ name: '40', score: '14', ping: '19' },
{ name: '50', score: '15', ping: '20' },
];
const htmlString = ReactDOMServer.renderToStaticMarkup(
<table>
<thead>
<tr>
<th>name</th>
<th>score</th>
<th>ping</th>
</tr>
</thead>
<tbody>
{list.map((d, i) => {
return (
<tr key={i}>
<td>{d.name}</td>
<td>{d.score}</td>
<td>{d.ping}</td>
</tr>
);
})}
</tbody>
</table>,
);
console.log(htmlString)
```
艹，评论区的 markdown 竟然不支持 jsx，渲染如上 jsx 会把中间变成表格，用的 txt 渲染
shabby 发表于 2023-2-18 16:42
为什么不试试神奇的 jsx 呢
```txt
哈哈哈哈哈
mk支持好像还是偏少的
论坛其实问题挺多的...
但是现在真的找不到什么特别好的论坛框架 来瞅瞅人工智能 道无涯i 发表于 2023-2-18 19:26
来瞅瞅人工智能
别说
代码基本没大错 shabby 发表于 2023-2-18 16:42
为什么不试试神奇的 jsx 呢
```txt
js应该也行吧
页:
[1]