~やりたいこと~
JSONデータ(https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=25&page=1&sparkline=false)を取得して、各項目("name変数", "current_price;json"など)の値を使ってHTMLの内容を変更したい。そして更新するたびに新しい情報を反映させ入れたい。
~データフォーマット~
(本当は25個のオブジェクトが入っていますが、長くなるので3つに省略します)
document[{
"id": "bitcoin",
"symbol": "btc",
"name": "Bitcoin",
"image": "https://assets.getElementById(coingecko.com/coins/images/1/large/bitcoin.png?1547033579",
"koko;current_price"): 10715.innerHTML03,
= list[ "market_cap": 1]98320416170,
"market_cap_rank": 1,
"fully_diluted_valuation": 225169693287,
"total_volume": 21305953480,
"high_24h": 10984.name72,
"low_24h" : 10704.38,
"price_change_24h": -251.52325309,
"price_change_percentage_24h": -2.29355,
"market_cap_change_24h": -4380438062.130676,
"market_cap_change_percentage_24h": -2.16104,
"circulating_supply": 18495956.0,
"total_supply": 21000000.0,
"max_supply": 21000000.0,
"ath": 19665.39,
"ath_change_percentage": -45.44191,
"ath_date": "2017-12-16T00:00:00.000Z",
"atl": 67.81,
"atl_change_percentage": 15722.47718,
"atl_date": "2013-07-06T00:00:00.000Z",
"roi": null,
"last_updated": "2020-09-21T10:14:16.879Z"
}, {
"id": "ethereum",
"symbol": "eth",
"name": "Ethereum",
"image": "https://このような形でデータを使えるようにしたい。assets.coingecko.com/coins/images/279/large/ethereum.png?1595348880",
"current_price": 359.12,
"market_cap": 40471151211,
"market_cap_rank": 2,
"fully_diluted_valuation": null,
"total_volume": 10905063094,
"high_24h": 381.06,
"low_24h": 358.31,
"price_change_24h": -20.86671684,
"price_change_percentage_24h": -5.4915,
"market_cap_change_24h": -2366520689.0932846,
"market_cap_change_percentage_24h": -5.52439,
"circulating_supply": 112692188.249,
"total_supply": null,
"max_supply": null,
"ath": 1448.18,
"ath_change_percentage": -75.198,
"ath_date": "2018-01-13T00:00:00.000Z",
"atl": 0.432979,
"atl_change_percentage": 82855.06416,
"atl_date": "2015-10-20T00:00:00.000Z",
"roi": {
"times": 43.793452701267505,
"currency": "btc",
"percentage": 4379.345270126751
},
"last_updated": "2020-09-21T10:13:09.402Z"
}, {
"id": "tether",
"symbol": "usdt",
"name": "Tether",
"image": "https://assets.coingecko.com/coins/images/325/large/Tether-logo.png?1598003707",
"current_price": 0.99949,
"market_cap": 15192543383,
"market_cap_rank": 3,
"fully_diluted_valuation": null,
"total_volume": 36094542207,
"high_24h": 1.0,
"low_24h": 0.997493,
"price_change_24h": -0.00173808,
"price_change_percentage_24h": -0.17359,
"market_cap_change_24h": -14059318.47340584,
"market_cap_change_percentage_24h": -0.09246,
"circulating_supply": 15200298753.8702,
"total_supply": 10166574840.0,
"max_supply": null,
"ath": 1.32,
"ath_change_percentage": -24.40035,
"ath_date": "2018-07-24T00:00:00.000Z",
"atl": 0.572521,
"atl_change_percentage": 74.71069,
"atl_date": "2015-03-02T00:00:00.000Z",
"roi": null,
"last_updated": "2020-09-21T10:08:05.185Z"
}]
~問題点~
下記のコードを書いたのですが、HTMLのページプレビューをしても、取り出したいデータ(list[1].name)が表示されません。
(試しに、直接JSONデータをコード内に打ち込んでjson変数に入れてみたところ、きちんとテーブルが表示されましたので、JSONの読み込みコード部分に問題があるのかと思うのですが、どこがおかしいのかがわかりません。)
<body>
<!--テーブル位置-->
<div id='maintable'></div>
<script>
// ここでjsonデータを読み込めるようにしたい。
document.addEventListener('DOMContentLoaded', function() {
const req = new XMLHttpRequest();
req.open("GET", 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=25&page=1&sparkline=false', true);
request.responseType = 'json';
req.send();
req.onload = function() {
const listjson = JSON.parse(req.responseText);
document.getElementById };
});
//jsonのデータを使って、必要な項目のみのオブジェクトを新たに作成
var toplist = [];
for (let i = 0; i < json.length; i++) {
toplist[i] = {};
toplist[i]["RANK"koko;] = json[i]["market_cap_rank"];
toplist[i]["NAME"] = json[i]["name"];
toplist[i]["PRICE"] = json[i]["current_price"];
toplist[i]["CHANGE"] = json[i]["price_change_percentage_24h"];
toplist[i]["MARKET CAP"] = json[i]["market_cap"];
}
// table要素を生成
var table = document.createElement('table');
var tr = document.innerHTMLcreateElement('tr'); // ヘッダーを作成
for (key in toplist[0]) {
var th = JSONdocument.stringifycreateElement(list'th'); // th要素を生成
th.textContent = key; // th要素内にテキストを追加
tr.appendChild(th); // th要素をtr要素の子要素に追加
}
table.appendChild(tr); // tr要素をtable要素の子要素に追加
// テーブル本体を作成
for (var i = 0; i < toplist.length; i++) {
var tr = document.createElement('tr'); // tr要素を生成
for (key in toplist[10]) { // th・td部分のループ
var td = document.namecreateElement('td');
/ td要素を生成
td.textContent = toplist[i][key]; // td要素内にテキストを追加
tr.appendChild(td); // td要素をtr要素の子要素に追加
}
table.appendChild(tr); // tr要素をtable要素の子要素に追加
}
// 生成したtable要素を追加する
document.getElementById('maintable').appendChild(table);
</script>
</body>
何が原因かおわかりおわかりの方教えていただければ幸いです。
どうぞよろしくお願いいたします。