【JavaScript】APIから取得したJSONデータをDOM操作に利用する方法

Question

##前提・実現したいこと

APIから取得したJSONデータをDOM操作に利用しようとしているのですが、エラーが出てしまいます。

MDNの『JSONデータの操作』( https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/JSON )を参考にして、Data変数に、JSON を元にに生成された JavaScript オブジェクトを格納し、DOM操作を行う関数に引数として渡したのですが、うまくいきませんでした。

##当該のソースコード

const url = 取得予定のJSONがあるURL
let currentNum = 0; //JSONのresultsプロパティの何番目を取得するか

const Data = fetch(url)
   .then((response) => {
       response.json()
           .then((data)=>{
                   data.results
           })
           .catch((e)=>{
                   console.log(e)
            })
           })

console.log(Data)

setQuiz(Data);
})

function setQuiz(jsonObj){
    const Quiz = jsonObj[currentNum];

    document.getElementById('questionNumber').textContent = (currentNum+1)+"番目"
    document.getElementById('question').textContent = Quiz.question //APIからとってきた質問   
    })
}

##問題点
・const Quiz = jsonObj[currentNum];
のところで、
"Cannot read property '0' of undefined"というエラーが出てしまう

・Quiz.question
のところで、
"Cannot read property 'question' of undefined"というエラーが出てしまう

##試したこと

・console.log(Data)
のところで、
"Promise{(<pending>)}"
とコンソールに表示されているため、JSONデータの取得自体はできているようです。

間違っている点、改善方法を指摘していただきたいです。
よろしくお願いいたします。

Answer 1

const Data = fetch(url).then( ... );

となっている時点で、 Data に入っているのは Promise オブジェクトです。
一方で setQuiz 関数が要求する引数は JSON オブジェクトそのものです。
であれば Data.then(setQuiz) とすべきかと思います。

Comments

[moritat-222]

htsign様

回答ありがとうございます。
PromiseオブジェクトはJSONオブジェクトそのものではないのですね。
Data.thenでresolveすればJSONオブジェクトにできるとのこと、大変勉強になりました！

Answer 2

htsign さんも書かれていますが、Fetchで取得したデータからJSONを取得するためには、一度jsonメソッドで値を抽出すつ必要があります。

こんな感じではどうでしょうか。

const Data = fetch(url)
   .then((response) => {
       console.log(response.json())  // JSONが取得できていることを確認
       return response.json() // ここでBody からJSONを返す
           })
           .catch((e)=>{
                   console.log(e)
            })


// Fetch 取得が終了したら Data を resolve してPromiseオブジェクトを返す

Data.then(result => {
    setQuiz(result);
})

function setQuiz(jsonObj){
    const Quiz = jsonObj[currentNum];

    document.getElementById('questionNumber').textContent = (currentNum+1)+"番目"
    document.getElementById('question').textContent = Quiz.question //APIからとってきた質問   
}

※動作確認してません。動かなかったらすみません。

↓こちらのサンプルコードが参考になると思います。
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

Comments

[htsign]

横からで申し訳ありません。
Data は既に Promise オブジェクトで、それに対して Promise.resolve を適用しても意味はありませんよ。
Promise<Promise<T>> は Promise<T> に flatten される、という仕様があるからです。

const createPromise = value => new Promise(resolve => resolve(value));
createPromise(1).then(one => createPromise(2).then(two => one + two)).then(console.log);

とすると 3 が出力されるのが分かるかと思います（Promise の内部で Promise を作っているのにも関わらず）

[apprentice]

htsign さん、ありがとうございました。

ご指摘のとおり、わざわざ Promise.resolve する必要はありませんでした。
手元で書き直し、Data.then だけで resolveすることを確認しました。
私自身も勉強になりました。

コメントのコードは書き直します。

[moritat-222]

apprentice様

回答ありがとうございました！
参考となるコードを書いていただいたため、とてもわかりやすかったです。

Data.then だけで resolveできるのでPromise.resolveは不要、とのこと、私も勉強できて大変良かったです