javascript json形式のデータをHTMLに表示したい

前提・実現したいこと

フロント系を勉強中の初学者です。

javascriptで取得したjson形式のデータをinnerHTMLでWEBページ上に表示したいです。

発生している問題・エラーメッセージ

コンソールにはデータを出力できたのですが、innerHTMLなどでWEBページ上に表示するのに苦戦しています

該当のソースコード

javascript
1const sensingDataUrl = new URL('APIのURL');
2let params = sensingDataUrl.searchParams;
3params.append('limit', 1);
4fetch(
5    sensingDataUrl,
6    {
7        'method': 'GET',
8    }
9)
10.then(r=>r.json())
11.then(j=>console.log(j.data[0]));;
12
13let jsontest = ;
14.then(j=>(j.data[0]));;
15
16
17let elem = document.getElementById("test").innerText = jsontest;
18//elem.innerText =

HTML
1<html>
2    <html lang="ja">
3
4
5    <head>
6            <meta charset="utf-8">
7            <link rel="stylesheet" href="./style.css">        
8    </head>
9
10    <body>
11        <div id="room">
12        <div class="unit"><p>ユニットA</p></div>
13        <div class="unit"><p>ユニットB</p></div> 
14        <div class="unit"><p>ユニットC</p></div>
15        </div>
16
17        <p id="test">testtext</p>
18
19        <div class="jsread">
20        <script type="text/javascript" src="test.js"></script>
21        </div>
22
23        <div class="contents" id="output"></div>
24
25       
26
27
28
29    </body>

試したこと

jsonの入った変数をinnerHTMLで置こうと思ったのですがうまくいかず
できればjqueryを使わず実現したいです。
ご教授いただけませんでしょうか。

行動規範の内容に同意します

回答2件

デバッグ用途ですよね？
体裁を整えたいなら作りこむ必要があります。

JavaScript
1document.getElementById("test").textContent = JSON.stringify(jsontest, null, 4);

CSS
1#test {
2  white-space: pre;
3}

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

投稿2018/11/29 06:22

x_x

総合スコア13749

ベストアンサー

JavaScript
1let jsontest = ;
2.then(j=>(j.data[0]));;

工夫してみました感ありますが、これは文法的におかしいので動きません。
Promise周りの事をちゃんと勉強しましたか？
これで値を取り出す事は出来ません。

JavaScript
1const sensingDataUrl = new URL('APIのURL');
2let params = sensingDataUrl.searchParams;
3params.append('limit', 1);
4fetch(
5    sensingDataUrl,
6    {
7        'method': 'GET',
8    }
9)
10.then(r => r.json())
11.then(j => j.data[0])
12.then(jsontest => {
13    let elem = document.getElementById("test").innerText = jsontest;
14});

正しくはこう、Promiseを使っても非同期処理は非同期処理であり、
一生Promiseの中から出る事はできないので、fetch結果に依存する処理は全てthenの引数の関数内で実行してください。

それじゃifやforで条件分岐しにくいじゃないかやだーという話なら、
async/await構文を使えば見栄え上は外に出せます。
そちらを学習しましょう。

async/awaitを使った場合、こういうコードになります。

JavaScript
1// await構文はasync関数内でしか使えないので、async関数を定義
2const main = async () => {
3  const sensingDataUrl = new URL('APIのURL');
4  let params = sensingDataUrl.searchParams;
5  params.append('limit', 1);
6
7  // awaitを使ってPromiseの正常終了を待つ、戻り値は最初のthenので指定した関数の引数と同じrになる
8  const r = await fetch(sensingDataUrl, {method: 'GET'};
9  const jsontest = r.json().data[0];
10  const elem = document.getElementById("test").innerText = jsontest;
11)
12
13// 改めて定義した関数を実行
14main();