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

Have you worked with any other API (having a CORS issue) and did you have to implement this strange workaround (i.e. using callback=? with format=json) ? Also, i encountered this problem for the first time while working on the Wikipedia project. Why didn’t i encounter this issue while with the previous two projects since there were cross origin requests involved there too? (Is it because the wiki servers do not support CORS?)

I had CORS issues with other projects, but the format the requested made a little more sense. I can’t remember off the top of my head how different they were, but I do remember Wikipedia being the outlier.

so you mean callback=? with format=jsonp should be how things should work normally?

Did this happen to anyone else: I was using codepen in Chrome to write the code and it just returns nothing. It claims it fails the .getJSON operation. Same code in codepen opened in Safari works fine, I get the correct data.
It had taken me forever to figure out that “callback=?” situation, then another forever to figure out I should try another browser…
Anyway, is this happening to others?

Hey guys if you don’t want to get too caught up with CORS, you can try out this jsonp npm package:

Well… putting my API query address into the browser gets these results… not sure why I am getting so many iterations of "Fck you" but something tells me that is not how it is supposed to work. Anybody want to help me un-Fck this situation?

Beyond that, in terms of just the JSON data being returned… Why am I only seeing PageID’s? And can I actually use those for anything? Looking for “Title” and one sentence summary.

{
    "batchcomplete": "",
    "continue": {
        "apcontinue": "!!Fuck_you!!",
        "continue": "-||info"
    },
    "query": {
        "pages": {
            "618468": {
                "pageid": 618468,
                "ns": 0,
                "title": "Nick Saban",
                "contentmodel": "wikitext",
                "pagelanguage": "en",
                "pagelanguagehtmlcode": "en",
                "pagelanguagedir": "ltr",
                "touched": "2016-08-29T21:08:26Z",
                "lastrevid": 735675192,
                "length": 72505
            }
        },
        "allpages": [
            {
                "pageid": 5878274,
                "ns": 0,
                "title": "!"
            },
            {
                "pageid": 3632887,
                "ns": 0,
                "title": "!!"
            },
            {
                "pageid": 600744,
                "ns": 0,
                "title": "!!!"
            },
            {
                "pageid": 34443176,
                "ns": 0,
                "title": "!!!Fuck You!!!"
            },
            {
                "pageid": 11011780,
                "ns": 0,
                "title": "!!!Fuck You!!! And Then Some"
            },
            {
                "pageid": 34443184,
                "ns": 0,
                "title": "!!!Fuck You!!! and Then Some"
            },
            {
                "pageid": 39401265,
                "ns": 0,
                "title": "!!! (Chk Chk Chk)"
            },
            {
                "pageid": 2556962,
                "ns": 0,
                "title": "!!! (album)"
            },
            {
                "pageid": 10065458,
                "ns": 0,
                "title": "!!! (band)"
            },
            {
                "pageid": 16381751,
                "ns": 0,
                "title": "!!Destroy-Oh-Boy!!"
            }
        ]
    }
}
1 Like

Did you fix this yet? What api query parameters are you sending in the URL?

ttps://en.wikipedia.org/w/api.php?action=opensearch&format=jsonfm&limit=5&callback=?&search=[ENTER YOUR SEARCH TERM HERE]

PM me if you want to discuss further. I see you have created solutions for several of the fCC exercises that are ahead of me, would definitely like to stay in touch with you and get your input as I move forward.

-DW

1 Like

Hmmm, I can’t get that api call working in my existing wikipedia app - The console complains about it being a non-executable file type. I don’t get any out put at all.

I used a slightly different query string:

Mild Spoiler
"https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + query + "&format=json&callback=?"

Hi guys,

It is incredible. You have a huge organisation called wikipedia which has the goal to gather and organise all the human knowledge and they can´t even explain properly their own API. What a terrible, terrible, terrible explanation and documentation.

I admire and even donate to Wikipedia. But something is seriously wrong with the way we are doing things.

I even found a comment on the documentation that said that they were not masochist enough to try to attempt an explanation on how to gather the information through an XMLHttpRequest! Incredible!!

I am able to get data from the API with my XMLHttpRequest… what I don´t understand is how to query properly the data provided by Wikipedia.

Cheers

2 Likes

thanks! i got stuck on this…

Whoever got stuck on this, just use jQuery to make a jsonp request, here is the link how to do a jsonp request and get around cross browser compatibility
https://learn.jquery.com/ajax/working-with-jsonp/

To solve it with CORS approach, I believe it requires you to configure server, to add some headers, am I right?

3 Likes

I have to say, revealing that query string definitely felt like a cheat! (You did warn us.) How did you figure that out? I have been completely stuck on how to get back multiple results via action=query v action=opensearch. (I now see API:Search - MediaWiki, but I didn’t find that until reading your hint here.) Many thanks!

I don’t remember to be honest - I think a wise sage on Gitter pointed me in the right direction.

Don’t feel bad, though - it’s a nasty API :slight_smile:

Once you know how to work with APIs a little better they will all make sense. Once you start building your own APIs for the backend cert, this will be a distant memory :slight_smile:

This project was going great till I got to the API portion. I have been stuck for hours. I’m even using what appears to be a simple url, and I am getting nothing in the console. Not even an error. I tried it on Postman, and it’s working fine, but it’s not doing anything in my program.

For starters, the WIkePedia documentation sucks…and secondly for Pete’s sake javascript needs to lighten up a little.
Here’s how I solved mine, for anyone who will be stuck out there:

$(document).ready(function(){

		$('#searchBtn').on('click', function(){

			var searchMe = $('#search').val(); //picks the user-generated value
			var apiUrl = 'https://en.wikipedia.org/w/api.php?action=opensearch&search=' + searchMe + '&format=json&callback=?'; // API url

			$.ajax(
			{
				type: "GET",
				url: apiUrl,
				async: false,
				dataType: "json",
				success: function(data){
					console.log(data);
				},
				error: function(err){
					'<p>' + error + '</p>';
				}
			}
			) //AJAX call

		});//searchBtn onClick function

	});//document ready function
</script>

here is my code and it didn’t display anything in my codepen…

$(document).ready(function() {

var searchValue =$(“#searchstring”).val();

$(“.sbutton”).on(“click”, function() {
// code to push the wrap div element and icon up the container
$(“.wrap”).animate({ marginTop: “30px”}, 500 );

var wikiLink = " https://en.wikipedia.org/w/api.php? action=action=opensearch&search=" + searchValue + "&format=json&callback=?";


$.ajax({
  url: wikiLink,
  type: "GET",
  dataType: "jsonp",
  success: function(data) {
    
    console.log(data);
   // var dDiv = document.createElement("div");
   // dDiv = "content";
  //  dDiv.className = "secondDiv";

//document.getElementByClassName(“container”).append(dDiv);
// for (var i = 0; i < data.array[2].length; i++) {
// $(“#content”).appendChild(
// “

” + data.array[2][i].title + “


// );
// }
},

  error: function(error) {
    console.log(error);
  }
});

});
});

Can you explain what &callback=? does? Without it, on postman it says Could not get any response

Someone’s gotta help me
$(document).ready(function(){
$(‘button’).on(‘click’, function(){
var userInput = $(’#userInput’).val();
var apiUrl = ‘https://en.wikipedia.org/w/api.php?action=opensearch&search=’ + userInput + ‘&format=json&callback=?’;
$.ajax({
type: “GET”,
url: apiUrl,
dataType: ‘jsonp’,
success: function(json) {
console.log(json);
}
});
});
});
It is reporting "Refused to load the script ‘https://en.wikipedia.org/w/api.php?action=opensearch&search=undefined&format=json&callback=jQuery21409673013441808604_1519530485409&_=1519530485410’ because it violates the following Content Security Policy directive: "script-src ‘unsafe-eval’ ‘unsafe-inline’ *.google-analytics.com"
i really don’t know what it is but it is definitely not a syntax error
Do I need an api key or somethinh?
thanks