json requestに対する応答の内容を確認しますか？

Question

私はFreeCodeCampチャレンジに従ってランダムなクォートジェネレータを作成しようとしていますが、私が実際に要求しているjsonオブジェクトを実際に取得していることを確認するテストを作成することから始めたいと思います。私が訪れたとき、「引用符」と次のコードへのidが設定されたシンプルなH1要素（jQueryのはCodePenにアップロードされている）

function genQuote() { 
    var output = $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(data){ 
    var theQuote = data.content; 
    var Author = data.title; 

    document.getElementById('quote').innerHTML = theQuote; 
    }); 
} 

問題のURLを持つJSONオブジェクトのようにはっきり見えるものを示し、私には、しかし、私の関数は#quote項目をまったく変更しません。

Answer 1

$.getJSON()コールをjsonpリクエストに変換するのではなく、JSONをリクエストするために、URLから&callback=を削除します。また、単純なオブジェクトではなく配列が返されます。あなたの質問にコメントが言うようにブラケット表記

function genQuote() { 
    var output = $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(data){ 

    var theQuote = data[0].content; 
    var Author = data[0].title; 

    document.getElementById('quote').innerHTML = theQuote; 
    }) 
} 

$(genQuote); 

jsfiddle https://jsfiddle.net/gpyx6jLy/

Answer 2

を使用してオブジェクトにアクセスすることは、これはクロスオリジン・リクエスト共有（CORS）の問題です。 APIは、アクセスを許可しないAccess-Control-Allow-Originヘッダーとして "http://null"を返しています。

これはAPIサーバーのバグであり、おそらくそれを使用できないようです。