2017-03-25 5 views
0

ここでは、APIからデータを非同期にフェッチすることを含むいくつかのことに取り組んでいます。正しい答えを間違った答えの配列に入れようとするときを除いて、すべてがうまくいきます。返されるのは、内容ではなく配列の長さだけです。私が間違っていることは何ですか?ここでなぜこのHTTP要求はコンテンツではなく配列の長さを返すのですか?

はHTMLとjQueryコードです:プッシュ機能のための

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width"> 
     <title>repl.it</title> 
     <link href="index.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
     <div> 
     <h3>Answers</h3> 
     <ol></ol> 
     </div> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <script src="index.js"></script> 
    </body> 
</html> 

jQueryの

$(() => { 
    $.ajax({ 
    method: "GET", 
    url: "https://opentdb.com/api.php?amount=50&category=18", 
    async: true, 
    success: (data) => { 
     let results = data.results; 
     $.each(results, (i, difficulty, question) => { 
     difficulty = results[i].difficulty; 
     question = results[i].question; 
     correctAnswer = results[i].correct_answer; 
     answers = results[i].incorrect_answers; 

     $("ol").append(` 
      <li>${answers.push(correctAnswer)}</li> 
     `); 
     }); 
    } 
    }); 
}); 
+0

[ '$ .each'のドキュメント](http://api.jquery.com/jquery.each/)を確認してください。あなたのコールバックの引数の数が間違っています。 – Schlaus

+0

@Schlausどのように?私は配列とコールバック関数の両方を持っています。すべてがうまく動作します。難易度、質問、回答、および正しい回答がすべて適切な対応データを返します。問題は、正しい答えを答え配列にプッシュするときに発生します。 –

+0

docs:callbackタイプ:機能(整数indexInArray、オブジェクト値)。コールバックには3つの引数がありますが、これはあなたが期待するものではありません。 – Schlaus

答えて

1

チェックthe docs

メソッドが呼び出された時のオブジェクトの新しい長プロパティ戻り値。

答えの長さを返す正しい答えを押して、あなたはあなたのhtmlでそれを表示しています。それは完全に自然です。

最初にプッシュし、htmlタグを作成します。

これをチェックします。

$(() => { 
 
    $.ajax({ 
 
    method: "GET", 
 
    url: "https://opentdb.com/api.php?amount=50&category=18", 
 
    async: true, 
 
    success: (data) => { 
 
     let results = data.results; 
 
     $.each(results, (i, difficulty, question) => { 
 
     difficulty = results[i].difficulty; 
 
     question = results[i].question; 
 
     correctAnswer = results[i].correct_answer; 
 
     answers = results[i].incorrect_answers; 
 

 
     answers.push(correctAnswer) 
 
     $("ol").append(` 
 
      <li>${correctAnswer}</li> 
 
     `); 
 
     }); 
 
    } 
 
    }); 
 
});
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>repl.it</title> 
 
    <link href="index.css" rel="stylesheet" type="text/css" /> 
 
</head> 
 

 
<body> 
 
    <div> 
 
    <h3>Answers</h3> 
 
    <ol></ol> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script src="index.js"></script> 
 
</body> 
 

 
</html>

+0

私はすでにそれを試みました。同じ結果が得られました。 –

+0

@CollinsOrlando本当ですか?私の答えに "Run code snippet"をクリックしてください。それはいくつかの値を示しています。あなたが望むものであるかどうかわからない – Hasan

+0

返された正しい答え/選択肢です。私が探していたのはすべての答え(選択肢)でした。それにもかかわらず、私は解決策を見つけました。 –

関連する問題