[英]displaying json data of multi dimensional array in html table fetched from api
如果有人幫助我,我將不勝感激。
在以 HTML 表格格式顯示 json 數據時,我需要一些幫助。 來自 API 的 json 數據是這樣的——
Object { prices: (471) […], market_caps: (471) […], total_volumes: (471) […] }
market_caps: Array(471) [ (2) […], (2) […], (2) […], … ]
[0…99]
0: Array [ 1619665331929, 0 ]
0: 1619665331929
1: 0
length: 2
<prototype>: Array []
1: Array [ 1619668852017, 0 ]
2: Array [ 1619672451594, 0 ]
3: Array [ 1619676320179, 0 ]
我在提取 json 數據時遇到了真正的 js 問題,因為我無法獲取數據。我嘗試了很多方法,包括嵌套循環來獲取但它不起作用。 我的 JS 代碼-
// api url
const api_url =
"https://api.coingecko.com/api/v3/coins/comfytoken/market_chart?vs_currency=usd&days=30&interval=minutely";
// Defining async function
async function getapi(url) {
// Storing response
const response = await fetch(url);
// Storing data in form of JSON
var data = await response.json();
console.log(data);
if (response) {
hideloader();
}
show(data);
}
// Calling that async function
getapi(api_url);
// Function to hide the loader
function hideloader() {
document.getElementById('loading').style.display = 'none';
}
// Function to define innerHTML for HTML table
function show(data) {
let tab =
`<tr>
<th>Prices</th>
<th>Marketcap</th>
<th>Volume</th>
</tr>`;
// Loop to access all rows
for (let r of data.list) {
tab += `<tr>
<td>${r.prices} </td>
<td>${r.market_caps}</td>
<td>${r.total_volumes}</td>
</tr>`;
}
// Setting innerHTML as tab variable
document.getElementById("employees").innerHTML = tab;
}
我的 HTML 代碼-
<html lang="en">
<head>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- Here a loader is created which
loads till response comes <p id="employees"></p> -->
<div class="d-flex justify-content-center">
<div class="spinner-border"
role="status" id="loading">
<span class="sr-only">Loading...</span>
</div>
</div>
<h1>Chart</h1>
<!-- table for showing data -->
<table id="employees"></table>
</body>
</html>
感謝閱讀
提供的數據允許 arrays 之間的鍵映射。 在這種情況下,我們可以將各種 arrays 轉換為單個對象數組,並將 map 轉換為行。 我在下面舉了一個例子來說明如何做到這一點。
一些數組方法請參考文檔:
const loadData = async() => ({ "prices": [ [1621359090214, 6.544815910245511e-06], [1621362710632, 6.617157866650854e-06], [1621366266933, 6.511845773866363e-06], [1621369972751, 6.45506329074821e-06], [1621373586805, 6.4895192349164596e-06], [1621377197778, 6.528440047870483e-06], [1621380733154, 6.553322251996456e-06], [1621384368464, 6.460241920722578e-06], [1621387852771, 6.4966649899102326e-06], [1621395190078, 6.203860393053995e-06], [1621398752203, 5.8293676073562845e-06], [1621402359948, 5.800274968205944e-06], [1621405937594, 5.618324509050109e-06], [1621409595717, 5.59324926455179e-06], [1621413128277, 5.686476265244116e-06], [1621416596495, 5.756274919281165e-06], [1621420392396, 5.713044744049376e-06], [1621424004911, 5.502782733313466e-06], [1621427947904, 5.442429292652396e-06], [1621431549713, 4.434344021605351e-06], [1621434927948, 4.509122624261053e-06], [1621434467000, 4.509122624261053e-06] ], "market_caps": [ [1621359090214, 0.0], [1621362710632, 0.0], [1621366266933, 0.0], [1621369972751, 0.0], [1621373586805, 0.0], [1621377197778, 0.0], [1621380733154, 0.0], [1621384368464, 0.0], [1621387852771, 0.0], [1621395190078, 0.0], [1621398752203, 0.0], [1621402359948, 0.0], [1621405937594, 0.0], [1621409595717, 0.0], [1621413128277, 0.0], [1621416596495, 0.0], [1621420392396, 0.0], [1621424004911, 0.0], [1621427947904, 0.0], [1621431549713, 0.0], [1621434927948, 0.0], [1621434467000, 0.0] ], "total_volumes": [ [1621359090214, 12188.804162995595], [1621362710632, 16422.906137378064], [1621366266933, 17370.531395103244], [1621369972751, 16355.141226289688], [1621373586805, 16546.42959627594], [1621377197778, 18786.92656973702], [1621380733154, 19330.83561775617], [1621384368464, 21018.755033279227], [1621387852771, 20846.165976772616], [1621395190078, 26639.79486946861], [1621398752203, 24999.32820385281], [1621402359948, 24874.563995550383], [1621405937594, 23392.66541329663], [1621409595717, 23288.2611903364], [1621413128277, 17850.766220657362], [1621416596495, 19226.87678704703], [1621420392396, 19082.481103324568], [1621424004911, 18380.172434939956], [1621427947904, 18178.58231224136], [1621431549713, 17454.16909223272], [1621434927948, 15601.266143252773], [1621434467000, 15601.266143252773] ] }); const transformData = (data) => { const convertToObj = (arr) => ( arr.reduce((obj, [key, value]) => { obj[key] = value; return obj; }, {}) ); const priceObj = convertToObj(data.prices); const marketCapsObj = convertToObj(data.market_caps); const totalVolumesObj = convertToObj(data.total_volumes); return Object.keys(priceObj).map(key => ({ price: priceObj[key], marketCap: marketCapsObj[key], totalVolume: totalVolumesObj[key] })); }; (async() => { const data = await loadData(); const dataRows = transformData(data); document.querySelector('#loading').style.display = 'none'; const table = document.querySelector('#employees'); const header = '<thead><tr><th>Prices</th><th>Market Cap</th><th>Volume</th</td></thead>'; const tableRows = dataRows.map(row => `<tr><td>${row.price}</td><td>${row.marketCap}</td><td>${row.totalVolume}</td></tr>`).join('\n'); table.innerHTML = `${header}\n<tbody>${tableRows}</tbody>`; })();
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div class="d-flex justify-content-center" id="loading"> <div class="spinner-border" role="status"> <span class="sr-only">Loading...</span> </div> </div> <h1>Chart</h1> <!-- table for showing data --> <table id="employees"></table> </body> </html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.