Ownedmedia ウェブ制作に役立つコンテンツを発信中!

JSON 2019.03.19

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

Tags: ,,

過去記事「外部の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データの取得方法

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?