[英]How do I display JSON file data into HTML table (using JavaScript only, not jQuery)
我是 web 開發的新手,我正在制作一個網站。 我想使用 JavaScript 在 HTML 表中顯示我的 JSON 數據。 就我而言,我有這個代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>stocksite</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body onload="loadData()">
<table>
<tr>
<td id="dt"></td>
</tr>
</table>
<script>
var data, i;
function loadData() {
var xhttp = new XMLHttpRequest();
xhttp.open('GET', 'data.json', true);
xhttp.send();
xhttp.onreadystatechange = function () {
if (xhttp.readyState == 4 && xhttp.status == 200) {
data = JSON.parse(xhttp.responseText);
for(i=0; i<data.stocktrade.length; i++){
document.getElementById('dt').innerHTML=data.stocktrade[i].date;
}
}
}
}
</script>
我有 JSON 文件(名稱:data.json)。 我想從 data.json 文件中顯示日期。
像這樣的東西?
// const data = require('/data.json'); Just import the file this way // Say you had a data like following const data = { "stocktrade": [{ "userId": 1, "firstName": "Krish", "lastName": "Lee", "phoneNumber": "123456", "emailAddress": "krish.lee@learningcontainer.com" }, { "userId": 2, "firstName": "racks", "lastName": "jacson", "phoneNumber": "123456", "emailAddress": "racks.jacson@learningcontainer.com" }, { "userId": 3, "firstName": "denial", "lastName": "roast", "phoneNumber": "33333333", "emailAddress": "denial.roast@learningcontainer.com" }, { "userId": 4, "firstName": "devid", "lastName": "neo", "phoneNumber": "222222222", "emailAddress": "devid.neo@learningcontainer.com" }, { "userId": 5, "firstName": "jone", "lastName": "mac", "phoneNumber": "111111111", "emailAddress": "jone.mac@learningcontainer.com" } ] }; var i; function loadData() { const dtable = document.getElementById('dtable'); for (i = 0; i < data.stocktrade.length; i++) { const row = dtable.insertRow(i); const cell0 = row.insertCell(0) cell0.innerHTML = data.stocktrade[i].firstName; const cell1 = row.insertCell(1) cell1.innerHTML = data.stocktrade[i].phoneNumber; } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>stocksite</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/stylesheet.css"> </head> <body onload="loadData()"> <table id="dtable"> <tr> <td id="dt"></td> </tr> </table> </body> </html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.