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

WebAPIから取得したデータをブラウザに表示させてみた

More than 1 year has passed since last update.

わんわんお!
犬も猫も大好きな、プログラミング初心者オジサンです。

今回はjavascriptでWebAPIの使い方を学ぶため、こちらのAPI( https://dog.ceo/dog-api/ )を利用してサンプルコードを書いてみました。
「わんわんお?」というボタンをクリックすると、ボタンの下に犬種と画像が表示されるようにしています。

1.準備(HTMLとCSS)

APIから取得したデータを入れるハコとして、下記のとおりhtmlを書きました。

<!DOCTYPE html> 
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>わんわんお</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <button id='click'>わんわんお?</button>
  <!-- APIから取得した犬種と画像を表示する -->
  <div>犬種:<span id='type'></div>
  <div>画像:<img id='image'></div>
  <script src="js/main.js"></script>
</body>
</html>

なお、APIに登録されている画像サイズが大きいので、画像の高さが300pxになるようCSSで調整しています。

#image {
    height: 300px;
}

2. fetchメソッドで動かす

データ取得はfetchメソッドでやっています。
コードの型は、MDNで紹介されているものをそのまま流用しています。

    const button = document.getElementById('click');
    const type = document.getElementById('type');
    const image = document.getElementById('image');
    // ボタンをクリックしたらイベント発動
    button.addEventListener('click', () => {
        fetch('https://dog.ceo/api/breeds/image/random') // APIのURL
        .then(response => {
            return response.json();
        })
        .then(myJson => {
            // imgタグに取得したURL画像を入れる
            image.src = myJson['message'];
            // 取得したURLをスラッシュ記号で分割し、犬種を表した要素を取得する
            const breed = myJson['message'].split('/')[4];
            type.innerText = breed;
            button.innerText = 'わんわんお!'
        });
    });

こちらのAPIでは、次のようにjsonが構成されていました。

{
    "status": "success",
    "message": "https://images.dog.ceo/breeds/greyhound-italian/n02091032_12144.jpg"
}

messageに犬の画像が入っているので、imgタグのsrcプロパティにmessageを入れればブラウザに写真が表示されるようになります。
また、取得した画像URLをスラッシュ記号で分割すると、5番目(indexだと4)に犬種が登録されているので、splitで配列化して要素を取得すれば、犬種をブラウザ上に表示させることができます。

3. 最後に

今回のAPIはシンプルだったので、サンプルコードを作る練習にはもってこいでした。
今後レベルアップできたら、googleのAPIなどにもチャレンジしていこうと思います。

solarsoyo
DOMDOMバーカー美味しいです(^q^)
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