[英]How do I display JSON file data into HTML table (using JavaScript only, not jQuery)
I am new to web development and I am making one website.我是 web 开发的新手,我正在制作一个网站。 I want to display my JSON data in HTML table using JavaScript.
我想使用 JavaScript 在 HTML 表中显示我的 JSON 数据。 As far I have this code.
就我而言,我有这个代码。
<!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>
and I have JSON file (name:data.json).我有 JSON 文件(名称:data.json)。 I want to display date from data.json file.
我想从 data.json 文件中显示日期。
Something like this?像这样的东西?
// 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.