Build an ORDS API Resource Module, GET request with JavaScript fetch, display in HTML

Really trying to optimize SEO with that title 👆🏼!

Recap

💡 All the code you'll see in this post can be found in my moviestreamjs github repository.💡

This post is a continuation of a previous one, which can be found here. In this post, I’ll:

Further query the View I created with SQL
REST Enable that same SQL (in the REST Workshop)
Use the Fetch API in JavaScript
Display the JSON items (from that GET request) from my Autonomous Database using the Bootstrap HTML and CSS framework

If you are coming from the previous related post, then you’ll recall I used the following SQL query:

My next step is to take this SQL and bring it to the REST Workshop, where I’ll turn it into an API.

REST Workshop

There are several ways you can navigate to the REST Workshop. Typically, I return to the Database Actions LaunchPad. From there, I select REST.

The Handler code

I've already created my Resource Module, Template, and Handler. I kept everything default, with no authentication enabled.

The only thing I changed was the SQL query. I removed the final line, fetching the first 10 only. I want to be able to control the pagination of the API. If I were to keep that last line, this eventual endpoint would always only return the first 10 rows. And what if I want the next ten rows thereafter? Well, if I hard-code this, then I can’t really make that work. So, I chose to leave it open-ended.

Technically, it is NOT open-ended because I retained the default pagination of 25. But, by removing that fetch first 10 rows condition, I can now fetch ALL rows that fit those parameters (in increments of 25).

Refresh yourself on ORDS' Limit and Offset parameters.

If I visit this new endpoint, it will appear like this:

And if I collapse the items, you’ll see something that is EXTREMELY confusing. If I removed that fetch first 10 rows condition in the original SQL query, then why do we see a limit and offset of 10?

The answer is because I actually set the Items Per Page equal to 10 (in the Resource Handler). This is the REST equivalent of a dirty joke. Consider yourself roasted…

JavaScript

With that endpoint live, I can take the API and drop it into some sample JavaScript and HTML code.

JavaScript and HTML

I learned a great deal about this JavaScript by reviewing this YouTube video. That is where I learned how to map through the items of my ORDS payload. And there was a refresher on JavaScript string interpolation (with template literals) too!

PAUSE: Don't be too intimidated by string interpolation and template literals! Read the link I included, and take your time. If you are coming from Python, its similar to Jinja (when using Flask) and f-string literals 🙃.

You can see that I’m using the map() constructor to iterate through all the data in my JSON payload. Remember, this was the payload in the items portion of my endpoint!

I believe the item in list.map((item) is a reference to an individual item inline 4’s data.items. The reason why I think this is because if I change the items in lines 7-10 in my JavaScript to something random, like the name bobby, things start to break:

However, if I change everything back to item, and start the live server in VS Code, I’ll be met with the following rendering:

That’s it, though. Combining the ORDS API, the Fetch API, simple JavaScript, and HTML will allow you to create this straightforward web page.

Reviewing Inspector, Console, Network

I also have a few more screenshots, one each for the HTML Inspector, Console Log, and Client/Server Network. All of these show what is happening under the covers but in different contexts.

Inspector

In the Inspector, you can see how the JavaScript map() constructor plus the document.querySelector() in line 18 of the JavaScript code work in tandem with line 12 of the HTML script to display contents on the page:

Console

Here, you can see the items in the Console. This is because we added console.log(item)in line 19 of the JavaScript code.

Network

Finally, you can see the 200 GET request from our ORDS API. Then, on the far right of the screen, you can see the JSON payload coming from that same ORDS endpoint.

Admittedly, the way the “Cast” is displayed is not correct. That is yet another array of cast members. And I’ve yet to learn how to structure that correctly. So, if you are reading this, and you know, let me know!

Finally, all the code you’ve seen in this post can be found in my moviestreamjs github repository.

That’s all for now!

Follow

And don’t forget to follow, like, subscribe, share, taunt, troll, or stalk me!