Wikipedia API...can't get anything to work

1

Hello friends,

Project Link - https://codepen.io/tlannoye11/full/RgpqaZ/

When I first started working on the Wikipedia Viewer page, all of this API stuff sounded like complete gibberish. I tried searching in Google, all over these forums, and even copied some live working examples from working sites made by other people. Nothing worked, so eventually I decided to cut my losses and move onto the next project, rather than risk getting fed up and having the whole thing fizzle out due to lack of progress.

Well, I’ve managed to finish all of the advanced projects and algorithms, and I’m now back to this same thing. Despite everything I’ve learned from the rest of this curriculum, this API stuff still might as well be written in Swahili, or Martian, or Braille. I’ve copied more examples, Googled everything I can think of (which led me to more stuff to copy), and read through at least a dozen pages of ancient Gaelic nonsense on the API documentation page. This is ridiculous.

In my code, I have copied “working” examples of both an AJAX call and a getJSON call, neither of which I fully understand, and neither of which actually produce anything. I have no idea how to debug this or what kinds of things to look for or how to even ask the right questions to describe wtf is going on here. What is going on, and why is this so difficult compared to all of the other “advanced” stuff that I was able to plow through in a matter of a few days?

I apologize for the rant, but this is just not working for me and there’s simply no reason it should be this hard.

2

Why do you have 2 calls to Wiki? You have both a $.getJson and a $.ajax call.
And why is your 2nd call hardcoded search for “Richard Feynman” ?

This is the extent of my wiki call

      // Setup click handler on homepage
      $('#wikiSearch').click(function(){
        $.ajax({
          method: "GET",
          url: "https://en.wikipedia.org/w/api.php",
          data: { 
                  format: "json", 
                  action: "query",
                  generator: "search",
                  gsrlimit: "100",
                  prop: "pageimages|extracts",
                  pilimit: "20",
                  exintro: "5",
                  explaintext: "4",
                  exsentences: "4",
                  exlimit: "max",
                  origin: '*',                 // CORS
                  gsrsearch: app.wikiKeyword   // search term (coming from Vue instance)
                }
        })
        .done(function( response ) {
          app.wikiResponse = response;
          app.wikiPages = Object.keys(response.query.pages);          // this will contain an array of page ids
          app.wikiPagesValues = Object.values(response.query.pages);  // this will contain an array of objects, the values of each search result

          // show results, hide initial homepage
          $('#form').addClass('hide');
          $('#identity').addClass('show');
          $('#results').addClass('show');
          
        });
      })

Then to display the results on html page

         <ul>
            <li v-for="page in wikiPagesValues " >
              <h2><a :href=" 'https://en.wikipedia.org/?curid=' + page.pageid " target="result">{{ page.title  }}</a></h2>
              <p><a :href=" 'https://en.wikipedia.org/?curid=' + page.pageid " target="result">https://en.wikipedia.org/?curid={{ page.pageid }}</a></p>
              <p>
                <div class="wikithumbnail" v-if="page.thumbnail" ><img :src="(page.thumbnail.source).replace(page.thumbnail.width,'150')"  v-if="page.thumbnail"></div>
                {{ page.extract }}
              </p>
            </li>                  
          </ul>

working demo
http://wikigle-owel.surge.sh/

3

If you call this URL

https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrlimit=100&prop=pageimages%7Cextracts&pilimit=20&exintro=5&explaintext=4&exsentences=4&exlimit=max&origin=*&gsrsearch=Richard%20Feynman

you’ll see the response object returned.

So now, it’s just a matter of assigning this response to a variable, and looping through it to display the results on your html page.

4

Youi’re missing one line of code. Do you want the answer or guidance in debugging?

5

Asynchronicity is one of the most difficult concepts in programming, and AJAX is no exception. Not only does it seem like there are a bunch of different functions that do the same thing, and the whole process doesn’t quite fit in with the straightforward, procedural manner we’re taught to code in the beginning. The Wikipedia Viewer project complicates things a bit more since the WikiMedia API is absurd and arcane. I’d suggest taking a step back, learn to make simpler AJAX calls, then get your head around a WikiMedia call. I have a link to the settings I use here. To learn how to make an AJAX call, YouTube is a great friend. Here is a video I really like, but if you just search “AJAX”, you’ll find many more. I made a quick example of an AJAX call to Github, which should make more sense after you watch the linked video.

Let me know if you have any questions.

6

@owel I had both types of API call in the code because I was trying to get either one of them to work. I had used one in the Random Quote project, and the other in the Weather project, and I was basically just trying to get something to work.

EDIT: The Richard Feynman part was part of the example code I copied from the documentation page.

@marzelin I guess long-term debugging guidance would probably be more beneficial.

7

Here’s my process. First, I try out the API URL on it’s own… type it on your browser and see if you’re getting the response you think you’re getting.

Also helps to click on Dev tools, and the Network tab and see if the calls to the API server are successful, and if you got any response (or the correct response). Also check Console if there are any error messages brought up.

Then finally, analyze the JSON response and try to see how you can extract the different parts that you need. Use the console for this to play around. sometimes the JSON response can be convoluted… I particularly didn’t like Wikipedia’s output.

Once you can confirm everything, then you write the code to display the JSON data back to html page.

8

Now that’s helpful. I sure hope I was drunk when I read through the curriculum and just missed the part where this was explained somewhere, because this was really helpful to know.

I was able to get the raw url to work for the $.getJSON call, and it seemed to show valid response data. However, when I went to the Network tab of dev tools (didn’t know that tab existed either), the Preview section says “Failed to load response data”. I’m not quite sure what that means, but it’s more info than I had before.

9

When debugging, you want to take a piece of functionality and test it in isolation.

First, you should check if the data is fetched correctly:


It seems that everything is working it this piece of code, so you test another piece - the form submission:

As you can see, the code in the submit handler is executed but the site reloads immediately after that. That’s your bug.
You ask google about this behavior and learn that you should return false from submit handler.

Voila.

10

A form would have a default behavior, and that is to submit the page when the ENTER key has been pressed. Since you don’t have a form action tag, it will just reload the same page.

So now, you have a click handler, but you didn’t disabled the default behavior of the form. As the click handler is running, the whole page suddenly reloads… so you need to stop that default behavior.

      // disable form ENTER key for the input text box
      $("#form").submit(function(event){
        event.preventDefault();
      })
11

…and with all of the page refreshes that naturally happen when I’m working in CodePen, plus the fact that my work laptop has frequent CPU spikes that force unscheduled Pomodoro-style breaks in the action, I never would have seen that. Turns out the API call was actually working all along. Thanks!