iT邦幫忙

2021 iThome 鐵人賽

DAY 21
2
Modern Web

JavaScript 從 50% 開始,打造函式庫不是問題!系列 第 21

JS 21 - 資料太多看得心很累?用 9 行程式碼將資料轉換為表格吧!

  • 分享至 

  • xImage
  •  

大家好!

光是複雜的 JSON 資料就要看到眼花了,如果又全部縮成一行,我不敢說了。
我們進入今天的主題吧!


程式碼

提高資料的可讀性。

Felix.json2table = function (json) {
    const table = Felix.create('table');
    Object.keys(json).forEach(function (key) {
        const tr = Felix(table).insert('tr');
        const th = Felix(tr).insert('th');
        const td = Felix(tr).insert('td');
        Felix(th).insert('span', key);
        Felix(td).insert(
            typeof json[key] === 'object'
                ? Felix.json2table(json[key])
                : Felix.create('span', json[key])
        );
    });
    return table;
};

實測

/* UTF-8 */
const json = { "heading": "JavaScript 從 50% 開始,打造函式庫不是問題!", "author": "Felix", "progress": "70%", "list": { "JS 19": { "post": "一份能控制網頁內容的三人全家桶?", "date": "2021-10-04" }, "JS 20": { "post": "HTML 字串算什麼,教你用 CSS 選擇器建立網頁元素!", "date": "2021-10-05" }, "JS 21": { "post": "資料太多看得心很累?用 9 行程式碼將資料轉換為表格吧!", "date": "2021-10-06" } } };

Felix('body').insert(Felix.json2table(json));

JSON2Table


差不多也到尾聲了,接下來我們要介紹的是函式庫的靜態方法。
如果對文章有任何疑問,也歡迎在下方提問和建議!
我是 Felix,我們明天再見!


上一篇
JS 20 - HTML 字串算什麼,教你用 CSS 選擇器建立網頁元素!
下一篇
JS 22 - 探險時間!深入查詢物件的所有子屬性!
系列文
JavaScript 從 50% 開始,打造函式庫不是問題!46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言