2016-12-07 2 views
1

Я пытаюсь создать генератор случайных кавычек в соответствии с вызовом FreeCodeCamp, но я хотел начать с простого написания теста, чтобы подтвердить, что на самом деле получаю объект json, который я запрашиваю. У меня есть простой h1 элемент с идентификатором, установленным в «цитаты» и следующий код (Jquery загружается вверх в CodePen)Проверить содержимое ответа на запрос json?

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; 
    }); 
} 

Адрес страницы в вопрос, когда посетил, показывает, что выглядит явно как объект JSON , для меня, но моя функция вообще не меняет элемент #quote.

+0

поиск CORS - проверьте консоль разработчика. –

ответ

1

Удалить &callback= с URL-адреса, запросить JSON, вместо того, чтобы конвертировать $.getJSON() запрос на jsonp. Кроме того, возвращается массив, а не простой объект; доступ к объектам с использованием брекет обозначения

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/

0

Как комментарий к вашему вопросу говорит, что это крест Origin Request Sharing (CORS) вопрос. API возвращает «http://null» в качестве заголовка Access-Control-Allow-Origin, который запрещает ваш доступ.

Похоже, что это ошибка на сервере API, и вы, вероятно, не сможете ее использовать.

+0

Проблема в том, что 'javascript' в Question делает запрос' jsonp', а не запрос 'JSON'. stacksnippets имеет «нулевой» источник, а не URL, переданный как параметр '$ .getJSON()'. Протокол происхождения запроса и URL-адреса также должны совпадать. – guest271314

Смежные вопросы