JSON是一種輕量級的數據交換格式,它的使用因其易于閱讀和編寫而越來越廣泛。
在前端開發中,我們經常需要將從服務端獲取到的JSON數據展示在表格中。下面是一個簡單的例子:
[ { "name": "小明", "age": 18, "gender": "男" }, { "name": "小紅", "age": 20, "gender": "女" }, { "name": "小強", "age": 22, "gender": "男" } ]
以上代碼表示了一個包含三個對象(即三行)的JSON數組,每個對象有三個屬性:name、age和gender。
為了將JSON轉換成表格,我們需要一些HTML和JavaScript代碼:
<table> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> </thead> <tbody id="table-body"></tbody> </table> <script> const data = [ { "name": "小明", "age": 18, "gender": "男" }, { "name": "小紅", "age": 20, "gender": "女" }, { "name": "小強", "age": 22, "gender": "男" } ]; const tbody = document.getElementById('table-body'); data.forEach(item => { const tr = document.createElement('tr'); tr.innerHTML = ` <td>${item.name}</td> <td>${item.age}</td> <td>${item.gender}</td> `; tbody.appendChild(tr); }); </script>
以上代碼會生成一個帶有表頭和表格內容的HTML表格,其中表頭包含了三個列名,而表格內容則是通過遍歷JSON數組并使用字符串模板語法插入相應數據得到的。具體而言,遍歷過程中我們創建了一個tr元素作為每一行,再依次插入td元素以展示每個屬性值。
這個簡單的例子展示了如何使用JSON拼成一個表格,通過掌握這種技巧,我們可以更好地利用JSON的優勢,輕松管理和展示數據。
上一篇vue獲取加載圖片