Problem with receiving the data from json callback from Wikipedia's API

Question

Hello,

So using other learn-to-code site and after the video course on AJAX here on Teamtreehouse i tried to make use of wiki's api.

My wiki article viewer should get 10 articles about the typed word from wiki's database and show it on the page.

I see in the console that the link is prepared good. I see the file when i click the URLs i make.
The problem is to show the results on the page. My codepen's here: http://codepen.io/RycerzPegaza/full/EyKjJX/

Do i have a bug in the code in the ajax part? Here's the part that happens when the query button is clicked:

  $("#search-icon").mouseup().mousedown(
    // AJAX 
    function getArticles() {
      if (value !== "" || value !== undefined) {
      mainLink = "https://en.wikipedia.org/w/api.php?action=query&format=json&generator=search&gsrnamespace=0&gsrlimit=10&prop=extracts|pageimages&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max" + "&gsrsearch=" + value + "&callback=?";
         console.log(mainLink);
        $.getJSON(mainLink, function (response) {
            articlesList = "<ul>";
          $.each(response.query.pages, function(index, article){

           if (index===2) {
              articlesList += "<li>" + "<h3>" + article.title + "</h3>";
           }

            if (index===4) {
              articlesList += "<p>" + article.extract +"</p>" + "</li>";
            }
          });
          articlesList += "</ul>";
        });

        $("#mainsection").html(articlesList);
      }

    }
  ); ```

Answer 1 · 2016-06-19T07:03:58Z

June 19, 2016 7:03am

Your main problem is that the response you get from the wikipedia-url is not valid JSON. If you look at the response, you'll need to remove '/**/(' from the start of the string, and ')' from the end.

You can test the result here

Here is also an example (in plain javascript though, but this works):

function httpGetAsync(theUrl, callback) {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() { 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            callback(xmlHttp.responseText);
    }
    xmlHttp.open("GET", theUrl, true); // true for asynchronous 
    xmlHttp.send(null);
}

var url = 'https://en.wikipedia.org/w/api.php?action=query&format=json&generator=search&gsrnamespace=0&gsrlimit=10&prop=extracts|pageimages&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max%22%20+%20%22&gsrsearch=%22%20+%20value%20+%20%22&callback=?%22';

httpGetAsync(url, function (response) {
    var result = response.replace('/**/"(', '');
    result = result.replace('}})', '}}');

    console.log(JSON.parse(result));
});

Answer 2 · 2016-06-19T11:54:32Z

June 19, 2016 11:54am

I changed the url. But now when i have pure JSON it doesn't work either. What i see in the console now is cross-origin fail message, but why if I use jsonp, and can see the file when i click the url anyway?

" XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?action=query&format=json&generator=searc…laintext&exsentences=1&exlimit=max&callback=JSON_CALLBACK&gsrsearch=Warsaw. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access. "

I know that when i have '&format=json' and a callback in the url - it's jsonp, right? So why wasn't i allowed access?

Welcome to the Treehouse Community

Looking to learn something new?

Sebastian Hewelt

Sebastian Hewelt

Problem with receiving the data from json callback from Wikipedia's API

2 Answers

Thomas Nilsen

Thomas Nilsen

Sebastian Hewelt

Sebastian Hewelt

Guadalupe Camacho

Guadalupe Camacho