JSON 2019.03.19

fetch APIで外部のJSONデータを取得する

Tags： ES6,javascrpt,JSON

過去記事「外部のJSONデータをjQueryを使ってHTMLへ出力する」などでも外部APIや静的ファイルでのJSONデータを取り扱う方法をまとめていましたが、今回はfetch APIという機能を使ってJSONデータを取得する方法についてまとめていきたいと思います。

fetch APIはブラウザに含まれるメソッドのひとつで、jQueryでいうgetJSON()のようなメソッドが実現できます。そのほかにも方法はありますが、ブラウザの機能が充実してきている現在において、jQueryを使わない場合には一般的になってきています。今回はサンプルにこのようなJSONを使う想定で進めていきます。

【JSON】

[
 {
  "id": "001",
  "name": "りんご",
  "en": "apple"
 },
 {
  "id": "002",
  "name": "みかん",
  "en": "orange"
 },
 {
  "id": "003",
  "name": "ぶどう",
  "en": "grape"
 }
]

実装方法も簡単で、下記のようにfecth()メソッドに対象となるjsonのパスを指定し、then()で繋げてjsonをオブジェクト形式に変換するという形になります。

【javascript】

const DATA_URL = './sample.json';
fetch(DATA_URL)
 .then(function(response){
  return response.json();
 })
 .then(function(jsonData){
  // JSONデータを扱った処理など
  console.log(jsonData);
 });

また、ES6の仕様であれば、アロー関数が使えます。アロー関数を使う形で書くとこのような形になります。

【javascript（ES6）】

const DATA_URL = './sample.json';
fetch(DATA_URL)
 .then((response) => response.json())
 .then((jsonData) => {
  // JSONデータを扱った処理など
 });

実際にコンソールに出力してみると、このようにJSONデータの中身が確認でき、取得できているのがわかります。

【console】

{ id: "001", name: "りんご", en: "apple" }
{ id: "002", name: "みかん", en: "orange" }
{ id: "003", name: "ぶどう", en: "grape" }

また、複数の異なるJSONデータもソースとなるパスを配列の形に収めることでまとめて取得できるようになります。その場合には、各JSONデータごとに処理を行うのでforEachで繰り返しの処理を行います。

【javascript】

const DATA_URLS = [
 './sample_01.json',
 './sample_02.json',
 './sample_03.json'
];
DATA_URLS.forEach(function(dataUrl){
 fetch(dataUrl)
  .then(function(response){
   return response.json();
  })
  .then(function(jsonData){
   // JSONデータを扱った処理など
   console.log(jsonData);
  });
});

実際にコンソールに出力するとこのような形でそれぞれのJSONデータを取得することができました。

【console】

// sample_01.json { id: "001", name: "りんご", en: "apple" } { id: "002", name: "みかん", en: "orange" } { id: "003", name: "ぶどう", en: "grape" }
// sample_02.json { id: "001", name: "自動車", en: "car" } { id: "002", name: "電車", en: "train" } { id: "003", name: "飛行機", en: "airplane" }
// sample_03.json { id: "001", name: "東京", en: "tokyo" } { id: "002", name: "大阪", en: "osaka" } { id: "003", name: "名古屋", en: "nagoya" }

このようにfetch APIを使うと簡単にJSONデータが取得でき、その後のデータに対しての処理も書きやすいなどのメリットがあります。外部APIからデータを取得する場合にはJSON形式も多いかと思いますのでいろいろ使うシーンは多いのではないでしょうか。

（参考にさせて頂いたサイト）
【JavaScript】fetchを使ったAPIデータの取得方法