[英]how to display json data using just javascript from a local json file or from a webserver?
嗨,我是使用JSON的新手,我想知道是否可以仅使用javascript(无框架)将JSON文件中的所有信息显示为表格。
最好是在本地加载文件,但可以使用Web服务器提取文件。
[ { "id": "bitcoin", "name": "Bitcoin", "symbol": "BTC", "rank": "1", "price_usd": "8088.05", "price_btc": "1.0", "24h_volume_usd": "9825660000.0", "market_cap_usd": "137294244348", }, { "id": "siacoin", "name": "Siacoin", "symbol": "SC", "rank": "36", "price_usd": "0.0144578", "price_btc": "0.00000178", "24h_volume_usd": "17730600.0", "market_cap_usd": "487999542.0", } ]
以上是我文件中的数据类型,非常感谢您的帮助
听起来不错的开始是使用ES6 Fetch API ...
观看抓取赶上。 它无法捕获您认为会发生的所有事情。
fetch(url) // Call the fetch function passing the url of the API as a parameter
.then(function() {
// Your code for handling the data you get from the API
})
.catch(function() {
// This is where you run code if the server returns any errors
});
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
从广泛的范围回答您的问题,答案是肯定的。 这是大多数框架背后的基本逻辑,这些框架为您提供了使用javascript创建html datables的工具(可以加载xml,json,csv等)。 但是,您可以使用html显示表格,并且可以使用javascript来处理html。 框架有助于加快这一过程,因此您不必重新发明轮子。
如果您不想使用框架,则可以使用XMLHttpRequest
。
据我所知,您仍然必须运行Web服务器来执行此方法,例如http-server 。
假设您在一个目录中有三个文件index.html
, script.js
和data.json
。
<script type="text/javascript" src="script.js"></script>
function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'data.json', true); //'data.json' is the relative path of the .json file
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
callback(xobj.responseText);
}
};
xobj.send(null);
}
(function() {
loadJSON(function(response) {
var actual_JSON = JSON.parse(response); //Now you can use the actual_JSON variable to build your table
console.log(JSON.stringify(actual_JSON, null, 2));
});
})()
[
{
"id": "bitcoin",
"name": "Bitcoin",
"symbol": "BTC",
"rank": "1",
"price_usd": "8088.05",
"price_btc": "1.0",
"24h_volume_usd": "9825660000.0",
"market_cap_usd": "137294244348"
},
{
"id": "siacoin",
"name": "Siacoin",
"symbol": "SC",
"rank": "36",
"price_usd": "0.0144578",
"price_btc": "0.00000178",
"24h_volume_usd": "17730600.0",
"market_cap_usd": "487999542.0"
}
]
请注意,我删除了market_cap_usd
的结尾逗号。
设置本地服务器后,只需打开Web浏览器并转到localhost:port_number
(我通常使用端口3000
或8080
)。
鸣谢: https : //codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript
假设您已准备好JSON数据,这是在表中呈现数据的一种简单的旧方法。
<table id="myTable" border="2">
</table>
<script>
var data = [
{
"id": "bitcoin",
"name": "Bitcoin",
"symbol": "BTC",
"rank": "1",
"price_usd": "8088.05",
"price_btc": "1.0",
"24h_volume_usd": "9825660000.0",
"market_cap_usd": "137294244348",
},
{
"id": "siacoin",
"name": "Siacoin",
"symbol": "SC",
"rank": "36",
"price_usd": "0.0144578",
"price_btc": "0.00000178",
"24h_volume_usd": "17730600.0",
"market_cap_usd": "487999542.0",
},
{
"id": "siacoin 3",
"name": "Siacoin 3",
"symbol": "SCD",
"rank": "32",
"price_usd": "0.0144578",
"price_btc": "0.00000178",
"24h_volume_usd": "17730600.0",
"market_cap_usd": "487999542.0",
}
];
function renderData(){
var table = document.getElementById("myTable");
var tableInfo = '';
data.forEach((item, index)=> {
tableInfo += "<tr><td>"+item.id+"</td><td>"+item.name+"</td><td>"+item.symbol+"</td><td>"+item.rank+"</td></tr>"
})
table.innerHTML = tableInfo;
}
renderData();
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.