JSON(JavaScript對象表示法)是一種常用于數據交互的格式。在網站開發過程中,通常會需要把JSON格式的數據顯示在頁面上,特別是在表格中顯示。下面是如何使用JSON把數據顯示在表格中的教程。
Step 1 - 準備數據
首先需要準備數據,把數據保存在一個JSON格式的文件中。以下是一個簡單的例子:
{ "students": [ { "name": "John Doe", "age": 25, "major": "Computer Science" }, { "name": "Jane Smith", "age": 23, "major": "Business Administration" }, { "name": "Mark Lee", "age": 26, "major": "Engineering" } ] }
Step 2 - 加載數據
在HTML文件中,使用JavaScript的AJAX技術加載JSON數據。
<script> var xmlhttp = new XMLHttpRequest(); var url = "data.json"; xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var data = JSON.parse(this.responseText); displayData(data); } }; xmlhttp.open("GET", url, true); xmlhttp.send(); function displayData(data) { // TODO: 在表格中顯示數據 } </script>
Step 3 - 顯示數據
最后一步是在HTML文件中,使用JavaScript將數據顯示在表格中。以下是一個簡單的表格UI:
<table id="myTable"> <tr> <th>姓名</th> <th>年齡</th> <th>專業</th> </tr> </table>
使用JavaScript創建表格行,然后將數據插入到單元格:
function displayData(data) { var table = document.getElementById("myTable"); var students = data.students; for (var i = 0; i < students.length; i++) { var row = table.insertRow(i+1); // 插入行 var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); cell1.innerHTML = students[i].name; // 插入數據 cell2.innerHTML = students[i].age; cell3.innerHTML = students[i].major; } }
執行完以上代碼,數據將會被顯示在表格中。