Wikipedia Viewer // API works, not sure what to do next to get the results to display

1

Hi all!

Thanks to the numerous threads on here, I have the API working and am able to get the API response using the input from the search bar. However, I have no idea how to get the five different tiles and snippets to display on my page or link the title/snippet to the actual wikipedia page. I’ve tried to use loops to get the result to display as follows:
success: function( data ) {
for(var i = 0; i <= 4; i++){
snippet[i].innerHTML = data.query.search[i].snippet;
title[i].innerHTML = data.query.search[i].title;

(where my div ids are “title[0]” “snippet[0]” etc), but that did not work. Additionally, I’m unclear as to how – even if I did get the display to work – I’d use the API to link to the wikipedia page.

Any help is appreciated :). I have a full-time job and for the past 4-5 months have been putting in hours after work to do FCC and other coding-related projects, and I just feel so stuck at this juncture. I’ve looked at other Wiki Viewer projects to try to debug my own and I get really overwhelmed at their sheer complexity.

Thanks for your help!

2

Are you receiving an error? You can press F12 to bring up the chrome developer tools. Check underneath the console tab and see if you have an error.

3

Maybe a link to the codepen if you’re using it?

4

Without seeing your code its hard to tell what you are doing or where you’re stuck at. That being said, maybe create an unordered list and then append each snippet as a list item in the UL.

You could use a forEach loop to loop through data.query.search. ‘data’ is the object returned from your ajax request, by the way.

Here is how I did that part of it:

    const url = 'https://en.wikipedia.org/w/api.php?action=query&list=search&srinfo=totalhits&srprop=snippet&format=json';
    $.ajax({
      type: 'GET',
      dataType: 'jsonp',
      url: `${url}&srsearch=${inputVariable}&srlimit=${$('#dropdown').val()}&sroffset=${offset}`
    }).done((data) => {
      data.query.search.forEach((wiki, index) => {
        const underscored = wiki.title.replace(' ', '_');
        wikiCount = index + offset + 1;
        $('ul').append(`<li><div class='wiki-number'>${wikiCount}</div><div class='wiki-info'><h3><a href='http://en.wikipedia.org/wiki/${underscored}'>${wiki.title}</a></h3><p>${wiki.snippet}...</p></div></li>`);
      });

here’s the entire thing

5

Nope – not getting any errors. Just unsure how to proceed to get the information to display now that the API works.

6

First, I agree with the other contributors that it is hard to determine your problem without you displaying more of your code.
Next, I would double check that data is actually returning valid data. Then, I would make sure snippet[i[ and title[i] are both HTMLElements.

success: function( data ) {
  console.log( data );
  console.log( "Snippet[" + i "] is HTMLElement: " + snippet[i] instanceof HTMLElement );
  console.log( "Title[" + i +"] is HTMLElement: " + title[i] instanceof HTMLElement );
  // rest of your code
}
7

my pen is http://codepen.io/e-m-r/pen/dNZabp – it’s very, very basic and as of now, only the first results display (I know it’s not set up correctly in the loop, I’m just not sure how to set up the success function or another function to get the results to display.

8

This is how I went about figuring this out. I remember being stuck on this several months back. You need to first look at your result. This is how I did it:

function searchMe(){
  var query = document.getElementById("searchBox").value;
  var url = "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + query + "&format=json&callback=?"
  $.ajax(
    {
    url: url,
    dataType: "jsonp",

    success: function( data ) {
      console.log(data.query.search)
    }
  })
}

replace your code with that and take a look at the console.

Each item in that array is a search result. Now you need to loop through your array. I’d use a forEach loop:

function searchMe(){
  var query = document.getElementById("searchBox").value;
  var url = "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + query + "&format=json&callback=?"
  $.ajax(
    {
    url: url,
    dataType: "jsonp",

    success: function( data ) {
      data.query.search.forEach(function (item) {
        console.log(item);
      })
    }
  })
}

hope this helps

1 Like
9

Thank you! Really appreciate it.