js 将json 数据转HTML table

Major

我有一段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"}, ]

steven026

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) => [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, [i, item]) => (prev[index[i]] = 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

1. 
   
2. data = [
   
3.     {"name":"10","score":"11","ping":"16"},
   
4.     {"name":"20","score":"12","ping":"17"},
   
5.     {"name":"30","score":"13","ping":"18"},
   
6.     {"name":"40","score":"14","ping":"19"},
   
7.     {"name":"50","score":"15","ping":"20"},
   
8. ]
   
9. 
   
10. function jsonToTableStr(data){
    
11.     if(data.length){
    
12.         // 根据第一行获取表头
    
13.         let a =   data[0];
    
14.         let thead_th = "<th>" + " 序号"+ "</th>";
    
15.         for(let key in a){
    
16.             console.log(key)
    
17.             thead_th =  thead_th + "<th>" + key + "</th>"
    
18.         };
    
19.         let thead_tr = "<tr>" + thead_th + '</tr>'
    
20.         let thead = '<thead id = "thead0"> ' + thead_tr + ' </thead>'
    
21.         // console.log(thead)
    
22.    
    
23.         // 获取表格内容
    
24.         let tbody_tr_list = ''
    
25.         let num = 0;
    
26.         data.forEach(item => {
    
27.             num += 1;
    
28.             let tbody_th = '<th>' + num + '</th>';
    
29.             for(let key in item){
    
30.                 tbody_th = tbody_th + '<th>' + item[key] + '</th>'
    
31.             };
    
32.             let tbody_tr = "<tr>" + tbody_th + '</tr>';
    
33.             tbody_tr_list += tbody_tr
    
34.         });
    
35.         let tbody = '<tbody id = "tbody0">' + tbody_tr_list + '</tbody>'
    
36.         // console.log(tbody)
    
37.    
    
38.         // 拼接表格
    
39.         let table_start   = '<table id = "batle_id_teshu"  border=1   cellspacing=0 style="margin-left:auto; margin-right:auto;white-space: nowrap" >';
    
40.         let table_content = thead + tbody
    
41.         let table_end     = '</table>'
    
42.         let table         = table_start + table_content + table_end
    
43.         // console.log(table);
    
44.         return table
    
45.     };
    
46. };
    
47. 
    
48. jsonToTableStr(data)
    

复制代码

shabby

为什么不试试神奇的 jsx 呢

// 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
[md]为什么不试试神奇的 jsx 呢

```txt

哈哈哈哈哈
mk支持好像还是偏少的
论坛其实问题挺多的...
但是现在真的找不到什么特别好的论坛框架

道无涯i

来瞅瞅人工智能

李恒道

道无涯i 发表于 2023-2-18 19:26
来瞅瞅人工智能

别说
代码基本没大错

王一之

shabby 发表于 2023-2-18 16:42
[md]为什么不试试神奇的 jsx 呢

```txt

js应该也行吧