Displaying JSON data - stuck on Wiki Viewer Project

Displaying JSON data - stuck on Wiki Viewer Project
0

#1

I’m working on my wiki viewer (8-bit Wiki Viewer). Before attempting to display the wikipedia title and abstract summary, I’d like to figure out how to display the JSON data that I’m pulling in the white div on the bottom left of the page.

I’m following along with the FCC lesson where the cat pics are displayed and trying to reuse the code, but it’s not displaying anything. I’m guessing that my error is somewhere in getting the searchTerm variable when I hit the ‘Enter’ key, but I don’t know what the issue is exactly.

If someone could point me in the right direction that’d be great!


#2

You’re very close! First, use keydown instead of keyup. Then, inside of your if clause, add e.preventDefault(). Then, your URL needs a callback=? in order for getJSON to call the function you write for it, as JSON requests are automatically converted to JSONP if the method detects you’re going to have CORS issues.


#3

Thanks for the tips! I made the changes, but the JSON data is still not displaying in the .results div. Any idea why?


#4

Nevermind - I figured it out. I didn’t add an ‘&’ before callback=?

Thanks again @PortableStick !


#5

@PortableStick - oops, I broke it again. I tried to render the JSON data into readable html elements, again using the FCC challenge as a guide, but now nothing is displaying.

Would you mind taking another look kind sir?


#6

Ah, you’re trying to call .each() on the wrong object. You’ll actually want json.query.search.forEach().


#7

Thanks! For purposes of understanding, why is this different from the FCC Challenge? They don’t use the .query.search terms


#8

It’s up to the backend programmer how the data is presented. Not every JSON response will be the same. Most of the time, the documentation will let you know how it’s going to look, but you can always run console.log(json) inside of your callback and then check your browser’s console to see the actual data.


#9

Hi @PortableStick - thanks for all of your help so far. I’m trying to add links to my Wiki Viewer’s search results so the user can click on the results to take them to the respective Wikipedia page. Can I just add parameters into the URL (e.g., &prop=links) to add that JSON data to the info I’m pulling? I did try that but it didn’t change the JSON data that was pulled.

Do I have to use a whole other URL to do this? I also wanted to add thumbnail pics to the search results, if possible.


#10

All Wikipedia links are https://www.wikipedia.com/en/ + title

:smiley:

Thumbnails are harder to do. I’d have no idea how since I’ve never tried.