JavaScript 非同期処理 thenメソッドの関数スコープの外でAPIのデータを扱うには

Question

前提・実現したいこと

あるサーバのAPIを使ってクイズアプリを作っているのですが、thenメソッドの外で関数を宣言するとエラーが発生してしまいます。thenメソッドのスコープ内で関数を宣言すると問題なく動作するのですが、スコープの外で宣言する方法を知りたいです。

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

クイズアプリの処理をする関数を外に出すとdata is not difinedのエラー表示が出ます。

該当のソースコード：

fetch('https://opentdb.com/api.php?amount=10')
.then(response =>{
return response.json();
})
.then(data =>{
setQuiz();
});

言語：JavaScript

ソースコード：

(function(){
'use strict';
const startBtn = document.getElementById('start');
const genre = document.getElementById('genre');
const diff = document.getElementById('difficulty');
const qs = document.getElementById('qs');
const answs = document.getElementById('answers');
const qsNum = document.getElementById('qs-num');
const btn = document.getElementsByClassName('btn');
let score = 0;
let count = 0;
let answsArr = [];

fetch('https://opentdb.com/api.php?amount=10')
.then(response =>{
  return response.json();
})
.then(data =>{
  setQuiz();
});  


 //クイズをセットする処理
 function setQuiz(){

   let qsCount = count + 1;

   genre.innerText = "[ジャンル] " + data.results[count].category;
   genre.style.display = "block";
   diff.innerText = "[難易度] " + data.results[count].difficulty;
   diff.style.display = "block";
   qs.innerText = data.results[count].question;
   qsNum.innerText = "問題" + qsCount;

   buildAnsChoises();

 }


 function buildAnsChoises(){
     // correct_answerを配列answsArrへプッシュ
   answsArr.push(data.results[count].correct_answer);
   //incorrect_answersを配列answsArrへプッシュ
   for(let i = 0; i < data.results[count].incorrect_answers.length; i ++){
     answsArr.push(data.results[count].incorrect_answers[i])
   }
   //answsArrをシャッフル
   let length = answsArr.length;
   for(let i = length - 1; i > 0; i --) {
    let j = Math.floor(Math.random() * (i + 1));
    let tmp = answsArr[i];
    answsArr[i] = answsArr[j];
    answsArr[j] = tmp;
   }
   //DOM生成処理
   for(let i = 0; i < answsArr.length; i ++){
     let dd = document.createElement('dd');
     let inp = document.createElement('input');
     answs.appendChild(dd);
     dd.appendChild(inp);
     inp.type = "button";
     inp.className = "btn";
     inp.value = answsArr[i];
   }
   //btn押下時処理
   for(let i = 0; i < btn.length; i ++){
     btn[i].addEventListener('click',function(){
       if(this.value === data.results[count].correct_answer){
         score ++;
         count ++;
       }else{
         count ++;
       }
       // クイズが終了した時の表示
       if(count === 10){
         qsNum.innerHTML = "あなたの正解数は" + score + "です！";
         qs.innerHTML = "再度チャレンジする場合は以下をクリック";
         genre.style.display = "none";
         diff.style.display = "none";
       }
       answsArr = [];
       answs.textContent = [];
       setQuiz();
     });
   }
 }

})();

Comments

[KuwabataK]

とりあえず今のままだと見にくいので、コード部分は以下のようにバッククォート３つで囲んでくれるとありがたいです。いい感じに整形してくれます

``` js
// ここにコードを書く
```

Answer 1

setQuiz() の引数にdataを取るようにして、呼び出し側で渡せばいいのでは。

Comments

[gtracker64]

```
fetch('https://opentdb.com/api.php?amount=10')
.then(response => {
return response.json();
})
.then(data => {
setQuiz(data); // 引数にdataを渡す
});

//クイズをセットする処理
function setQuiz(data) { // 引数を変数名dataで受け取る

let qsCount = count + 1;

genre.innerText = "[ジャンル] " + data.results[count].category;
genre.style.display = "block";
diff.innerText = "[難易度] " + data.results[count].difficulty;
diff.style.display = "block";
qs.innerText = data.results[count].question;
qsNum.innerText = "問題" + qsCount;

buildAnsChoises();

}
```

[Singo109]

ありがとうございます。前に回答頂いた方の時に解決しました。丁寧にありがとうございますm(_ _)m

[退会済みユーザー]

コード書いてくださった方、ありがとうございました。

回答の時点で解決したとのことでおわかりとは思いますが、要はthen()の引数に渡した関数の引数なので、その関数の中でdataを渡すようにしないといけないということです。

.then(function(data){
setQuiz(data);
}

[Singo109]

はい、ありがとうございました。引数の使い方がいまいち分かっていませんでした。今回頂いたの回答で以前より理解できたと思います。