Skip to main content
本文に 5663 文字追加
ソース リンク
Suzuran
  • 33
  • 3
  • 8

~やりたいこと~
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>;

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

~やりたいこと~
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"など)の値を使ってHTMLの内容を変更したい。そして更新するたび新しい情報を反映させたい。

document.getElementById(";koko").innerHTML = list[1].name;  //このような形でデータを使えるようにしたい。

~問題点~
下記のコードを書いたのですが、HTMLのページプレビューをしても、取り出したいデータ(list[1].name)が表示されません。

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 list = JSON.parse(req.responseText);
        document.getElementById(";koko").innerHTML = JSON.stringify(list[1].name);
    };
});

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

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

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

[{
            "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"
        }]

~問題点~
下記のコードを書いたのですが、HTMLのページプレビューをしてもデータが表示されません。
(試しに、直接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 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>;

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

本文に 142 文字追加; タグを編集
ソース リンク
Suzuran
  • 33
  • 3
  • 8

こんにちは。

~やりたいこと~
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"など)の値を使ってHTMLの内容を変更したい。そして更新するたびに新しい情報を反映させたい。

document.getElementById("koko").innerHTML = list[1].name; //このような形でデータを使えるようにしたい。

~問題点~
下記のコードを書いたのですが、HTMLのページプレビューをしても、取り出したいデータ(list[1].name)が表示されません。

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 list = JSON.parse(req.responseText);
        document.getElementById("koko").innerHTML = JSON.stringify(list[1].name);
    };
});

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

こんにちは。

~やりたいこと~
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"など)の値を使ってHTMLの内容を変更したい。そして更新するたびに新しい情報を反映させたい。

document.getElementById("koko").innerHTML = list[1].name; //このような形でデータを使えるようにしたい。

~問題点~
下記のコードを書いたのですが、HTMLのページプレビューをしても、データが表示されません。

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 list = JSON.parse(req.responseText);
        document.getElementById("koko").innerHTML = JSON.stringify(list);
    };
});

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

こんにちは。

~やりたいこと~
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"など)の値を使ってHTMLの内容を変更したい。そして更新するたびに新しい情報を反映させたい。

document.getElementById("koko").innerHTML = list[1].name; //このような形でデータを使えるようにしたい。

~問題点~
下記のコードを書いたのですが、HTMLのページプレビューをしても、取り出したいデータ(list[1].name)が表示されません。

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 list = JSON.parse(req.responseText);
        document.getElementById("koko").innerHTML = JSON.stringify(list[1].name);
    };
});

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

本文に 142 文字追加; タグを編集
ソース リンク
Suzuran
  • 33
  • 3
  • 8

こんにちは。

JSONデータを外部から取得して、変数"list"に代入し、下記のような感じで使えるようにし~やりたいこと~と思っ
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"など)の値を使ってHTMLの内容を変更したい。そして更新するたびに新しい情報を反映させたい

document.getElementById("koko").innerHTML = list[01].idname; //このような形でデータを使えるようにしたい。

下記のコードを書いたのですが、HTMLのページプレビューをしてもデータが表示されません。~問題点~
下記が作成したコードを書いたのですが、HTMLのページプレビューをしても、データが表示されません

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 list = JSON.parse(req.responseText);
        document.getElementById("koko").innerHTML = JSON.stringify(list);
    };
});

解決方法をご存じ何が原因かおわかりの方教えていただければ幸いです。
どうぞよろしくお願いいたします。

こんにちは。

JSONデータを外部から取得して、変数"list"に代入し、下記のような感じで使えるようにしたいと思っいます

document.getElementById("koko").innerHTML = list[0].id;

下記のコードを書いたのですが、HTMLのページプレビューをしてもデータが表示されません。
下記が作成したコードです。

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 list = JSON.parse(req.responseText);
        document.getElementById("koko").innerHTML = JSON.stringify(list);
    };
});

解決方法をご存じの方教えていただければ幸いです。
どうぞよろしくお願いいたします。

こんにちは。

~やりたいこと~
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"など)の値を使ってHTMLの内容を変更したい。そして更新するたびに新しい情報を反映させたい

document.getElementById("koko").innerHTML = list[1].name; //このような形でデータを使えるようにしたい。

~問題点~
下記コードを書いたのですが、HTMLのページプレビューをしても、データが表示されません

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 list = JSON.parse(req.responseText);
        document.getElementById("koko").innerHTML = JSON.stringify(list);
    };
});

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

本文に 142 文字追加; タグを編集
ソース リンク
Suzuran
  • 33
  • 3
  • 8
読み込んでいます
本文から 10 文字削除; タグを編集
ソース リンク
cubick
  • 2.1万
  • 5
  • 27
  • 64
読み込んでいます
編集済みの本文
ソース リンク
Suzuran
  • 33
  • 3
  • 8
読み込んでいます
本文に 111 文字追加
ソース リンク
Suzuran
  • 33
  • 3
  • 8
読み込んでいます
ソース リンク
Suzuran
  • 33
  • 3
  • 8
読み込んでいます