Guardian API Поиск Javascript JSONP

Question

Guardian API Поиск Javascript JSONP

0

У меня есть html-страница, которую я могу ввести в тему для поиска в текстовое поле, называемое "поиск", и есть кнопка отправки, называемая "searchbutton". Я пытаюсь найти API-интерфейс Guardian, а затем загружать результаты на html-страницу в "content" div, однако я не знаю, где я ошибаюсь и буду признателен за помощь. Мне не нужен ключ API, поскольку я использую общедоступную версию. Благодаря,

var baseURL = "http://content.guardianapis.com/search";
var searchQuery;

function init() {
  var search = document.getElementById("search");
  var searchButton = document.getElementById("searchbutton");
  searchButton.onclick = getSearchValue;
}

function getSearchValue () {
   var search = document.getElementById("search");
   var searchResult = search.value;
   searchQuery = searchResult.replace(" ", "+");
   loadSearch();
}

function loadSearch() {
    makeJSONPCall(searchQuery, "loadSearchCallBack");
}  


function makeJSONPCall(queryPart, callback) {
    var url = baseURL + "?q=";
    url = url + queryPart;
    url = url + "&callback=" + callback;
    var scriptElement = document.createElement("script");
    scriptElement.id = "jsonp";
    scriptElement.src = url;
    document.head.appendChild(scriptElement);
}

function loadSearchCallBack(data){
   cleanupScript();
   listResults(data);
}

function listResults(data) {
   for ( var i=0; i< data.response.results.length; i++) {
      var list = data.response[i];
      renderResults(i, data.response[i]);
   }
}

function renderResults(i, list) {
var resultDiv = document.getElementById("content");
resultDiv.innerHTML = list.results[i].webTitle;

}

function cleanupScript() {
var scriptElement = document.getElementById("jsonp");
scriptElement.parentNode.removeChild(scriptElement);
}


window.onload = init;

user10319 26 нояб. 2013, в 17:53

Источник

Теги:

javascript

html

api

jsonp

1 ответ

Ещё вопросы

jameslafferty · Answer 1 · 2013-11-26T14-21-00.000Z

Я закончил создание jsfiddle, включая несколько изменений.

JavaScript:

var baseURL = "http://content.guardianapis.com/search";
var searchQuery;
function init() {
    var search = document.getElementById("search");
    var searchButton = document.getElementById("searchbutton");
    searchButton.onclick = getSearchValue;
}
function getSearchValue() {
    var search = document.getElementById("search");
    var searchResult = search.value;
    searchQuery = searchResult.replace(" ", "+");
    loadSearch();
}
function loadSearch() {
    makeJSONPCall(searchQuery, "loadSearchCallBack");
}
function makeJSONPCall(queryPart, callback) {
    var url = baseURL + "?q=";
    url = url + queryPart;
    url = url + "&callback=" + callback;
    var scriptElement = document.createElement("script");
    scriptElement.id = "jsonp";
    scriptElement.src = url;
    document.head.appendChild(scriptElement);
}
function loadSearchCallBack(data) {
    listResults(data);
    cleanupScript();
}
function listResults(data) {
    for (var i = 0; i < data.response.results.length; i++) {
        var list = renderResults(data.response.results[i]);
    }
}
function renderResults(result) {
    var resultDiv = document.getElementById("content");
    resultDiv.innerHTML += result.webTitle;
}

function cleanupScript() {
    var scriptElement = document.getElementById("jsonp");
    scriptElement.parentNode.removeChild(scriptElement);
}
init();

Html:

<input id="search" type="search" />
<button id="searchbutton">Search</button>
<div id="content"></div>

Спасибо, но это не имеет значения
Вы видите какие-либо ошибки в консоли?