JSON(JavaScript Object Notation)是一種輕量級的數據交換格式,具有易讀易寫、易解析的特點,被廣泛應用于前后端數據交互中。在前端中,我們經常需要將從后端獲取到的 JSON 數據轉換為表格展示給用戶。
使用 JavaScript 可以輕松地實現將 JSON 數據渲染成表格的功能。以下是一個簡單的示例代碼:
const data = [ {id: 1, name: 'John', age: 20}, {id: 2, name: 'Lucy', age: 22}, {id: 3, name: 'Tom', age: 25} ]; const table = document.createElement('table'); const thead = document.createElement('thead'); const tbody = document.createElement('tbody'); const th1 = document.createElement('th'); th1.textContent = 'ID'; const th2 = document.createElement('th'); th2.textContent = 'Name'; const th3 = document.createElement('th'); th3.textContent = 'Age'; thead.appendChild(th1); thead.appendChild(th2); thead.appendChild(th3); data.forEach(item => { const tr = document.createElement('tr'); const td1 = document.createElement('td'); td1.textContent = item.id; const td2 = document.createElement('td'); td2.textContent = item.name; const td3 = document.createElement('td'); td3.textContent = item.age; tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tbody.appendChild(tr); }); table.appendChild(thead); table.appendChild(tbody); document.body.appendChild(table);
該代碼將一個包含三個 JSON 對象的數組渲染成一個包含表頭和內容的表格,表格會被添加到 body 中。這里使用了 DOM 操作創建了 table、thead、tbody、th、tr、td 等元素,然后將元素添加到父元素中,即動態創建了一個表格。這個表格中的數據可以方便地從后端獲取并進行渲染。