70589


こんにちは。

**～やりたいこと～**  
JSONデータを取得して変数"json"に入れたい。

**～データフォーマット～**  
（本当は25個のオブジェクトが入っていますが、長くなるので3つに省略します）

[code]

    [{
                "id": "bitcoin",
                "symbol": "btc",
                "name": "Bitcoin",
                "image": "https://assets.coingecko.com/coins/images/1/large/bitcoin.png?1547033579",
                "current_price": 10715.03,
                "market_cap": 198320416170,
                "market_cap_rank": 1,
                "fully_diluted_valuation": 225169693287,
                "total_volume": 21305953480,
                "high_24h": 10984.72,
                "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"
            }]
    
[/code]

**～問題点～**  
下記のコードを書いたのですが、HTMLのページプレビューをしてもデータが表示されません。  
（試しに、直接JSONデータをコード内に打ち込んでjson変数に入れてみたところ、きちんとテーブルが表示されましたので、JSONの読み込みコード部分に問題があるのかと思うのですが、どこがおかしいのかがわかりません。）

[code]

       <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 json = JSON.parse(req.responseText);
                };
            });
    
    
            //jsonのデータを使って、必要な項目のみのオブジェクトを新たに作成
            var toplist = [];
            for (let i = 0; i < json.length; i++) {
                toplist[i] = {};
                toplist[i]["RANK"] = 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.createElement('tr'); // ヘッダーを作成
            for (key in toplist[0]) {
                var th = document.createElement('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[0]) {　 // th・td部分のループ
                    var td = document.createElement('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>
    
[/code]

おわかりの方教えていただければ幸いです。  
どうぞよろしくお願いいたします。


CC BY-SA 4.0
2020-09-21T07:43:44.190
70583
2020-09-21T16:29:14.450
2020-09-21T12:22:12.157
40891
40891
question
javascript json
JSONデータを変数に入れたい


まず、`request.responseType = 'json';` requestは、`req`ですよね  
responseTypeにjson を指定したので responseで受け取ります。`json = req.response;`

詳しくは、[XMLHttpRequest](https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest)
を見てください。

**以下、スクリプト例です。**

[code]

    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);
    req.responseType = 'json';
    req.send();
    req.onload = function() {
        if( req.readyState == 4 ) {// データ受信完了.
                if( req.status == 200 || req.status == 304 ) {
                    let json = req.response;
                    console.log( json[0].market_cap_rank );
                }
        }
    };
    
[/code]

補足、  
今回はrequest が定義されていないのでReferenceErrorで止まってしまいます。

responseTypeが指定されていない場合は、htmlもしくは textで受け取ることになります。
request.responseTypeの行が無ければ `json = JSON.parse(req.responseText);`で受け取れるはずです。

処理を関数にまとめて（process(json); とか）req.onload内で関数を呼び出し処理するのが良いと思います。


CC BY-SA 4.0
2020-09-21T15:30:57.373
70589
2020-09-21T16:29:14.450
2020-09-21T16:29:14.450
22793
22793
70583
answer