I'm working on Wikipedia viewer project and having problem with Wiki API [Solved]

1

I think wikipedia has terrible API. Working with these kind of API is first time that harder for me.
Is it cheating to use npm package which will do all API GET work for me?

2 Likes
2

@kiknag I think the instructions said to use any libraries you think would be useful. For myself I used the jQuery $.getJSON() method configured to use JSONP to get around the CORS problem. And YES! the API docs on Wikipedia are awful…

6 Likes
3

yeah, i thought so as well as i was doing that one. it took me forever to realize that i should have been asking for jsonp format and not just json. and i only got told about that after asking on the chat. don’t hesitate to post your pen on the chat and ask for help, some really helpful people there!

1 Like
4

I am recieving empty JSON. I don’t know why…

5

@annamyself I found pasting my HTTP query string directly in the browser’s URL bar allowed me to see the raw Wikipedia reply message easily. You can try different combinations there until you start getting the response you expect to see and then once that’s working continue on again in your editor. I know you can examine the response directly in your editor, but I found the browser was a fast way to troubleshoot when I was having about the same issue as you are now.

6

Thank you. I will try. It’s so frustrating. :slight_smile:

7

Hi, is easier with the wikipedia sandbox:

1.- In this page : https://www.freecodecamp.com/challenges/build-a-wikipedia-viewer

Copy the link in “Hint #2: Here’s an entry on using Wikipedia’s API:”

https://www.dropbox.com/s/kgoyd7rv047h199/fccwikipedia.png?dl=0

2.- AT the bottom of that page, click on the “the API sandbox” link:
https://www.dropbox.com/s/d7k77y8t3ah94i0/linktoapi.png?dl=0

3.- In this page (the sandbox):
https://www.dropbox.com/s/4lxu95bgo9gnppc/blank.png?dl=0

4.- Select “action” --> “query”

https://www.dropbox.com/s/8d9hnx1x2bugzxz/selectquery.png?dl=0

5.- Later, in the left select “action=query”. In the right side select “titles” and enter a text:
https://www.dropbox.com/s/6czcc5hhieoq3i6/selecttitles.png?dl=0

6.- click “make request” (blue box), and get a response:
https://www.dropbox.com/s/frzk8xm6v8movms/response.png?dl=0

You need to try multiple combinations, but is easier in the sandbox.

note: i make this message with images, please tell me if the images are not displayed.

  • erretres
5 Likes
8

@kiknag I had a lot of trouble too with this one. What I found useful is using the free chrome app postman to understand what different requests are returning. I also used http://jsoneditoronline.org/ to help visually navigate through returned JSON.

2 Likes
9

Hi everyone…

I can get the json from wikipedia with jquery

using

$.getJSON(wikiSearch, function(json){});

but I can’t seem to parse the result? firefox sends this error message

SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

so what is the difference between json and jsonP? Am I suppose to convert the response to jsonP?

Is jquery the problem?

Do I have to make a manual AJAX request using xhttp and then manually convert the text response?

Basically after getting the json

After plugging in

console.log(json);

I don’t get anything. I can’t access the json childs either with json[0][0]
or even with json.continue.plcontinue etc.

Any advice would be much appreciated.

Thanks!

10

This is the same problem I’m having. I’ll let you know if I figure it out…

11

try this

$.get(wikiSearch,null,function(json){
console.log(json)
},'json'); // json here after result function to make return dataType for response to json automatic
12

This is what I’m using and it’s working. The apiURL is a variable that contains my api call.

$.ajax({
  type: "GET",
  url: apiURL,
  dataType: 'jsonp',
  success: function(data) {
    console.log(data);
  }
});
5 Likes
13

Hi,

I got mine working too… I found help from the chat forums…

I just added

&callback=?

to all of the url api calls… example:

http://en.wikipedia.org//w/api.php?action=query&format=json&titles=batman

just add

&callback=?

and i’d get:

http://en.wikipedia.org//w/api.php?action=query&format=json&titles=batman&callback=?

I think it does the same as what you do and turns it into a

jsonP

then I could experiment with the wikipedia api sandbox to my heart’s content.
Hope it helps.
Just a variant on the solution you gave.

i then plugged the url into my Jquery as usual…

$.getJSON(url, function(json){

});

8 Likes
14

Helped a lot, thanks man !

15

Glad I’m not the only one that didn’t completely understand the Wikipedia API documentation.

3 Likes
16

my query return empty, I tried the json editor and it return several results, please help

$("#search").on("click", function() {
		var keyWord ="";
		var linkAPI = "https://en.wikipedia.org/w/api.php?action=query&format=jsonp&list=search&srsearch=" + keyWord + "&callback=?"
		//$(".result").html("Result");
		$.getJSON(linkAPI, function(json) {
			$(".result").html(JSON.stringify(json));
		});
	});
17

You have a really counter-intuitive problem, because the Wikipedia API sucks!

Using format=jsonp and callback=? is supposed to make the json response jsonp, fixing the CORS issues.

BUT

Using format=jsonp returns the error:

Refused to execute script from 'your url' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

This means that format=jsonp is the wrong file type.

So, the weird solution is to delete the p.

If you change format to just json, it should work.

The bizarre thing here is that you are kinda telling wikipedia to deliver a json file with the format parameter, but also asking for a jsonp response with the callback.

I don’t know why that works…

2 Likes
18

Thank you! and how did you get that error? Nothing showed up in my console :scream:

19

Nothing fancy - just used the Chrome console ( maybe you are using the Codepen console? If you use only the Codepen console, it only shows console.log output, not errors).

I tweaked it a little so that I wasn’t using on(‘click’), but that wouldn’t affect the error.

1 Like
20

Same issue. Adding callback=? fixed it. Thanks everyone.