Stuck on Wikipedia Viewer JSON Dynamically created as input box is filled

1

I’ve gotten half way with the Wikipedia Viewer API project but am stuck on retrieving JSON from parsed data in separate chunks.

I wanted to make my search a bit more dynamic so I decided to have search results appear as the user types into the input box. The results are being output successfully onto a DIV called ‘output’ but as one piece, and I can’t seem to slice the results individually on the page using Javascript. I can only output and reference two JSON variables, which result in [Object Object] and can’t seem to pinpoint the ID field, which is dynamically created as the user types into the input box. So as the user puts in their text the JSON url is created on the fly and the field coming after “query”:{“pages”: is usually a dynamic number field that is the label I can’t grab with Javascript.

This project is still unfinished so you’ll see a submit button that doesn’t yet work and some other things.

The dynamic Javascript variable I am using to store the URL is:
var urlsearchT = “https://en.wikipedia.org/w/api.php?action=query&format=json&origin=*&generator=search&gsrsearch=” + up + “&gsrnamespace=0&gsrlimit=10&gsroffset=0&gsrwhat=text”;

Essential issue is when I try to ID the JSON field within the populate() function using this variable:
var title = data.query.pages I don’t know what identifier to use to ID the “query”:{“pages”: which is created dynamically as user types into input box. I could use a loop after I stringify() my JSON and then ID page # that way but that seems really long and unnecessary.

Here is my codepen:
https://codepen.io/osalvatierra/pen/NwjzMX

Any help or suggestions greatly appreciated.
Best,
Oscar

2 
{"batchcomplete":"","continue":{"gsroffset":10,"continue":"gsroffset||"},"query":{"pages":{"238765":{"pageid":238765,"ns":0,"title":"Anton LaVey","index":10},"13351414":{"pageid":13351414,"ns":0,"title":"Around the World (La La La La La)","index":9},"301169":{"pageid":301169,"ns":0,"title":"La","index":1},"53130556":{"pageid":53130556,"ns":0,"title":"LaMelo Ball","index":8},"1722020":{"pageid":1722020,"ns":0,"title":"La La Anthony","index":2},"47204682":{"pageid":47204682,"ns":0,"title":"La La Land (film)","index":3},"70889":{"pageid":70889,"ns":0,"title":"Mona Lisa","index":6},"95310":{"pageid":95310,"ns":0,"title":"Oscar De La Hoya","index":7},"4306142":{"pageid":4306142,"ns":0,"title":"Sha-La-La-La-La","index":4},"16982901":{"pageid":16982901,"ns":0,"title":"Sweat (A La La La La Long)","index":5}}}}

It looks like pages is an object of objects. From what I understand of your post above, you want to access each of those nested objects and create an HTML element containing the title value.

3

Hi Ariel. Thanks for taking a look.

Yes, I’m trying to first establish that I can access the title value, and then once that is figured out I’ll start to build and format the output.

4

So it looks like you have an object (the JSON response) which contains nested objects, one of which you want to use. You’ve worked with getting values out of nested objects before, so you have to tools to solve this problem.

you got this

1 Like
5

Will take a closer look. Appreciate the feedback. :slight_smile:

6

As an aside, I have been able to access the pages object and output content as one from there, but have been having issues with the next object within ‘pages’, i.e., the “238765” listed in the JSON you posted. This is the piece that is inconsistent and changes as the input field changes. I’m going to use a for loop and put the JSON object into a new object and go from there, and see if that leads somewhere. thx!

7

use this json editor to create JSON file and this also helps to validate.

https://jsonformatter.org/json-editor

8

What is the pageId used for in your project? Building a link maybe? Whatever you need it for can be repopulated with each REST response too. (For extra credit, you might later want to refactor this to use RxJS).

9

The pageID will be used to identify search entries and its associated content. Depending on what a user types in the input searchbox, WikiMedia associates the letter(s) with a particular number that then grabs the relevant content. Since I made my search dynamic, that number changes with each keystroke. Thanks again for the tips. Will be looking at it again today when I have some time. At work at the moment but should be able to get further along. :slight_smile:

10

I finally found the answer to this part of the equation. It turns out I can use Object.keys(). Getting there bit by bit.

11

Congrats! Good job. :smile:

12

Thanks again for your help. I work on this on and off due to other projects, but I am nearly there.

I was able to use Object.keys with a for loop to obtain the output I was looking for and added in a delay in output using settimeout with keyup function. The only thing that I need to figure out is how to remove the previous result when the input textbox changes either forward or backward. Any clues?

os

14

Thanks Randell. I’ll look into this :slight_smile:

15

I didn’t think it was going to be that easy! Thanks for that tip and saving me unnecessary lines of code trying to use if/else if on ‘value’.

16

There’s one last functionality I’d like to add. In addition to outputting title-results as the user types within the input search box, I’d like each result to be linked to it’s associated Wikipage. I have been able to add an ‘a href’ around each result, however, I’m finding it harder to append the specific ID that leads to each line’s Wikipage. When I append the array-for-loop I created for ID’s it appends to each ‘a href’ successfully but as one giant number string. I thought making another for-loop that loops through the ID’s would output them individually. Any ideas how to go about appending each ID to each ‘a href’?