上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

js 将json 数据转HTML table

[复制链接]

该用户从未签到

16

主题

56

回帖

90

积分

初级工程师

积分
90

新人报道

发表于 2023-2-18 12:47:42 | 显示全部楼层 | 阅读模式
悬赏1油猫币已解决

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

最佳答案

查看完整内容

[md]```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.from ...
  • TA的每日心情
    慵懒
    23 小时前
  • 签到天数: 602 天

    [LV.9]以坛为家II

    30

    主题

    523

    回帖

    1378

    积分

    荣誉开发者

    积分
    1378

    荣誉开发者新人进步奖油中2周年生态建设者新人报道挑战者 lv2油中3周年喜迎中秋

    发表于 2023-2-18 12:47:43 | 显示全部楼层
    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)

    用了很多语法糖

    回复

    使用道具 举报

    该用户从未签到

    16

    主题

    56

    回帖

    90

    积分

    初级工程师

    积分
    90

    新人报道

    发表于 2023-2-18 13:47:00 | 显示全部楼层
    本帖最后由 Major 于 2023-2-18 13:57 编辑

    1. data = [
    2.     {"name":"10","score":"11","ping":"16"},
    3.     {"name":"20","score":"12","ping":"17"},
    4.     {"name":"30","score":"13","ping":"18"},
    5.     {"name":"40","score":"14","ping":"19"},
    6.     {"name":"50","score":"15","ping":"20"},
    7. ]

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

    45. jsonToTableStr(data)
    复制代码


    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    55

    回帖

    84

    积分

    初级工程师

    积分
    84
    发表于 2023-2-18 16:42:18 | 显示全部楼层

    为什么不试试神奇的 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 渲染

    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5084

    回帖

    5958

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5958

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2023-2-18 17:10:00 | 显示全部楼层
    shabby 发表于 2023-2-18 16:42
    [md]为什么不试试神奇的 jsx 呢

    ```txt

    哈哈哈哈哈
    mk支持好像还是偏少的
    论坛其实问题挺多的...
    但是现在真的找不到什么特别好的论坛框架
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-11-15 00:01
  • 签到天数: 72 天

    [LV.6]常住居民II

    6

    主题

    14

    回帖

    59

    积分

    初级工程师

    积分
    59

    新人报道

    发表于 2023-2-18 19:26:49 | 显示全部楼层
    来瞅瞅人工智能 QQ图片20230218192553.jpg
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5084

    回帖

    5958

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5958

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2023-2-18 21:00:00 | 显示全部楼层

    别说
    代码基本没大错
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2024-3-13 10:14
  • 签到天数: 211 天

    [LV.7]常住居民III

    284

    主题

    3810

    回帖

    3739

    积分

    管理员

    积分
    3739

    管理员荣誉开发者油中2周年生态建设者喜迎中秋油中3周年挑战者 lv2

    发表于 2023-2-18 23:34:04 | 显示全部楼层
    shabby 发表于 2023-2-18 16:42
    [md]为什么不试试神奇的 jsx 呢

    ```txt

    js应该也行吧
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表