【GAS】スプレッドシートをJSON形式で出力して読み込むAPIを作る（Part2）

前回は、GoogleスプレッドシートをJSON形式で出力するところまで進みました。

続きです。

JSONデータを出力するHTML

JSONデータから total フィールドの値を取得して表示するためのHTMLコードを準備します。

<div class="main-container">
        <div class="message-body">Total：<span id="data-container"></span></div>
</div>

JavaScriptコード

指定されたURLからJSONデータを非同期で取得し、そのデータから total フィールドの値を抽出して、HTML内の要素に表示します。

<script>
    fetch('https://XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX')
    .then(response => response.json())
        .then(data => {
            document.getElementById('data-container').textContent = data[0].total;
        })
        .catch(error => console.error('データの取得中にエラーが発生しました:', error));
</script>

コードの解説

具体的な処理は以下の通りです。

[rml_read_more]

1. fetch関数を使用して提供されたURLからデータを取得します。
2. response.json()を使用して、取得したデータをJSON形式に変換します。
3. 取得したJSONデータから total フィールドの値を抽出して、HTML内の要素に表示します。

これにより、指定したURLのGoogle Apps Scriptから提供されるJSONデータの total フィールドの値が、HTML内の data-container というIDを持つ要素に表示されます。

まとめ

ウェブブラウザでウェブアプリケーションのURLにアクセスするとJSONデータが表示されます。