Help us understand the problem. What is going on with this article?

JavascriptのFetch APIを使ってJSONを取得する。

More than 1 year has passed since last update.

タイトルの通りだが、従来はJavascriptでJSONを取得する際は、XMLHttpRequestというものを使っていたらしい。fetch()メソッドはこのXMLHttpRequestの代替として、よりシンプルで強力な機能を実現してくれるようだ。

とりあえず、これを使ってJSONを取得して、画面に表示してみる。
今回は鉄道遅延情報のjsonというサイトを利用させていただく。

(本当はAppleのRSSジェネレータを使ってappstoreのランキングを取得しようと思ったのだが、CORSによるクロスドメインのエラーによってやる気を削がれてしまった。その件についても、後日書こうと思う。)

さて、遅延情報の取得に戻ろう。fetchを用いたjavascriptは以下の通り。

javascript
window.addEventListener('load', function() {
  getTrainList();
});

function getTrainList() {
  var url = 'https://tetsudo.rti-giken.jp/free/delay.json'; //遅延情報のJSON
  fetch(url)
  .then(function (data) {
    return data.json(); // 読み込むデータをJSONに設定
  })
  .then(function (json) {
    for (var i = 0; i < json.length; i++) {
      var train = json[i].name;
      var company = json[i].company;

      //表形式で遅延路線を表示する
      var row = document.getElementById('train-list').insertRow();
      row.insertCell().textContent = i + 1;
      row.insertCell().textContent = train;
      row.insertCell().textContent = company;
    }
  });
}

シンプルに、これだけ。上記のinsertRow().insertCell().textContentによって、列と行を追加し、JSONの値を詰め込んでいく。

index.html
    <h1>遅延路線</h1>
      <table id="train-list">
      </table>

シンプルに路線名と鉄道会社名のみを表示させた↓

Screenshot 2019-07-23 20.18.38.png

ここにFetch APIの詳しい情報が載っています。
MDN web docs 〜Fetchを使う〜

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away