BETA

APIから取得したJSONからArray(配列)を取り出してHTMLに組み込み画面に表示させる方法 fetch, async/awaitを使用

投稿日:2020-06-29
最終更新:2020-06-30

APIから取得したJSONからタイトルと写真を取り出して画面に表示するまで

  • APIのURLを指定
  • options はGETを指定
  • fetch でJSONの情報を取得
  • async/awaitを使ってデータを取得してから処理
  • タイトル(文字列)を取り出す 配列であることに注意
  • 写真はHTMLタグのimgをつけて表示させる
const url = 'http://127.0.0.1:8000/.../'  
// 取り出したいAPIのURLを指定  

        const options = {  
            method: 'GET'  
        };  
        // options にGETを指定  

        function fetchPhotoImage(url, options){  
            return fetch(url, options)  
            .then( response => response.json() );  
        }  
        // fetch でJSONの情報を取得  
        // このままではレスポンスが返ってくる前に次の処理が行われてしまってうまくいかないので。async/awaitを使ってデータを取得してから処理するようにする  

        async function fetchImage(url, options){  
            const response = await fetchPhotoImage(url, options);                       
            console.log(response[0]);  
            // ここで取り出したいものを取り出せているかコンソールで確認  

            document.getElementById('test').innerHTML = response[0].title;  
            // タイトル(文字列)を取り出す 配列なのでresponseのあとに[0]などをつけるのを忘れずに!  
            // pタグ内で指定したid="test"を指定  

            const imageElement = document.createElement('img');  
            document.body.appendChild(imageElement);  
            imageElement.src = response[0].photo1;  
            // 写真は文字列ではなく写真を表示させたいのでHTMLタグのimgをつけて表示させる  
        }  

        fetchImage(url,options);  
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

じゃーにゃりすとの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう