Geek Answers Handbook

Access Wikipedia API using JSONP

I have been trying for the past few days to get my code to work, but I just can't find the problem.
I want to connect to the Wikipedia server and get their JSON API so that I can make a list of elements matching the input value of searchInput.
I searched for JSONP, eventually finding that I can add "& callback =?" to my API request and that it should work. Now, although I have added it, the message is still not happening.
I noticed that the console on codepen.io momentarily returns "untitled", initializing the code after processing the input "#searchInput". Perhaps the problem is in my ... in the loop. Do you know what I have to do?
Link to my code: http://codepen.io/nedsalk/pen/zqbqgW?editors=1010
(JQuery is already included in the Settings menu)
If you prefer the HTML version of the code:

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title> Object Oriented JavaScript </title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"> </script> </head> <body> <h1> Wikipedia viewer </h1> <a href="http://en.wikipedia.org/wiki/Special:Randompage" target="_blank">Go random! </a> <form> <input type="text" name="searchInput" id="searchInput" placeholder="Search Wikipedia" onkeydown = "if (event.keyCode == 13) document.getElementById('submit-button').click()"/> <input type="submit" id="submit-button"/> </form> <div id="list"></div> <script> $(document).ready(function() { $("#submit-button").on("click",function (){ var input=$("#searchInput").val(); $.getJSON('https://en.wikipedia.org/w/api.php?action=query&generator=search&gsrsearch=' + encodeURIComponent(input) + '&prop=extracts&exlimit=10&exintro&exsentences=2&format=json&callback=?', function(API){ $("#list").empty(); for (var id in API.query.pages) {if(API.query.pages.hasOwnProperty(id){ $("#list").html('<a target="_blank" href="http://en.wikipedia.org/?curid=' + id + '">' +'<div id="searchList">' + "<h2>" + id.title + "</h2>" + "<br>" + "<h3>" + id.extract + "</h3>" + "</div></a><br>") }} }) }) }) </script> </body> </html>
+5
source share
1 answer

There are several problems in the code:

  • you must connect to the submit event of the form, not the click button, and use event.preventDefault() to stop event.preventDefault() .
  • you look at the keys of the returned object and try to access the properties of these strings, instead of using the keys to access the basic properties.
  • you set html() in each loop, so that only the last element will be displayed. You should use append() instead.

Try the following:

 $("form").on("submit", function(e) { e.preventDefault(); var input = $("#searchInput").val(); $.getJSON('https://en.wikipedia.org/w/api.php?action=query&generator=search&gsrsearch=' + encodeURIComponent(input) + '&prop=extracts&exlimit=10&exintro&exsentences=2&format=json&callback=?', function(response) { var pages = response.query.pages; $("#list").empty(); for (var id in pages) { $("#list").append('<a target="_blank" href="http://en.wikipedia.org/?curid=' + id + '">' + '<div id="searchList">' + "<h2>" + pages[id].title + "</h2>" + "<br>" + "<h3>" + pages[id].extract + "</h3>" + "</div></a><br>") } }); });

Working example

+3
source

More articles:


All Articles