displaying json data of multi dimensional array in html table fetched from api

Question

I will be grateful if anyone help me.

I need some help in displaying json data in HTML table format. json data from API is like that-


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 ]

I am facing real issue with js in extracting json data as I am not able to get data.I have tried many ways including nested loop to get but it not working. my JS code-

// 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;
}

my HTML code-

<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>

thanks for reading it

Answer 1

The data provided allows for key mapping between the arrays. In this case, we can convert the various arrays into a single array of objects and map those into rows. I include an example of how that could be done below.

Please refer to the documentation for some of the array methods:

 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>

displaying json data of multi dimensional array in html table fetched from api

Question

1 answers

solution1
0 2021-05-19 15:27:28

displaying json data of multi dimensional array in html table fetched from api

Question

1 answers

solution1 0 2021-05-19 15:27:28

solution1
0 2021-05-19 15:27:28