I found JavaScript and HTML code here and here and “remixed” it to work with one of my sample ORDS APIs. Here is the result:

the-html-in-browser, chris hoina, db tools, ords, oracle database, javascript, html, ords api, oracle rest api — ORDS + JavaScript + Fetch API + HTML

Impressive, no? Care to try it out? Read on friend!

References

I’ll front load with all the necessary stuff. That way, you can bounce if you don’t feel like reading. You’ll get the gist if you follow along with what I’ve provided.

Much of what I learned came from the MDN Web Docs site. I would get acquainted with the following pieces of code (or at least have them handy) since they heavily influenced me (a.k.a. plagiarized).

MDN Web Docs

I either used or referenced these files in my version of the code. They are all available in the two links I mentioned above, but I’m adding them here for convenience (in case you need to leave or want to review while on this page).

👈🏼 click these to reveal the contents

No! Not this one, dummy. This one is just an example…duh 🤕!

response: json() method

const myList = document.querySelector("ul");
const myRequest = new Request("products.json");

fetch(myRequest)
  .then((response) => response.json())
  .then((data) => {
    for (const product of data.products) {
      const listItem = document.createElement("li");
      listItem.appendChild(document.createElement("strong")).textContent =
        product.Name;
      listItem.append(` can be found in ${product.Location}. Cost: `);
      listItem.appendChild(document.createElement("strong")).textContent =
        `£${product.Price}`;
      myList.appendChild(listItem);
    }
  })
  .catch(console.error);

products.json

{
"products": [
{ "Name": "Cheese", "Price": 2.5, "Location": "Refrigerated foods" },
{ "Name": "Crisps", "Price": 3, "Location": "the Snack isle" },
{ "Name": "Pizza", "Price": 4, "Location": "Refrigerated foods" },
{ "Name": "Chocolate", "Price": 1.5, "Location": "the Snack isle" },
{ "Name": "Self-raising flour", "Price": 1.5, "Location": "Home baking" },
{ "Name": "Ground almonds", "Price": 3, "Location": "Home baking" }
]
}

style.css

html {
  font-family: sans-serif;
}

ul {
  list-style-type: none;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}

li {
  margin-bottom: 10px;
  background-color: pink;
  font-size: 150%;
  border-top: 3px solid pink;
  border-bottom: 3px solid pink;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
}

strong {
  background-color: purple;
  color: white;
  padding: 0 8px;
  border-top: 3px solid purple;
  border-bottom: 3px solid purple;
  text-shadow: 2px 2px 1px black;
}

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ORDS ➕ JavaScript</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
    <div>
      <h1>Employee Details</h1>
    </div>
    <div>
      <ul></ul>
    </div>
 <script src="script.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

Employee Details

ORDS code

Check out my remixed JavaScript code, DDL and ORDS module definitions (for this example) on my GitHub blog repo. I'll also include select items below.

Here are a few things to point out:

In line 16 of my index.html code, I referenced the JavaScript code (script.js) separately. This approach achieves the same effect as embedding the JavaScript directly into the HTML file (as seen in the MDN’s version of the index.html file).
The script.js contains the Fetch API and the JavaScript concept of “promises.” The following were super helpful for me. Maybe the will be for you too:
The JSON file contains an example of what an ORDS GET request response looks like (if viewing in the browser). The structure is nearly identical if you compare it to the MDN JSON file.
- This means you can take their HTML and JavaScript code and populate it with an ORDS endpoint and [subsequent] response data (i.e., the stuff you see in this localhost.json file).

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ORDS ➕ JavaScript</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
    <div>
      <h1>Employee Details</h1>
    </div>
    <div>
      <ul></ul>
    </div>
 <script src="script.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

script.js

const ordsApi = "http://localhost:8080/ords/ordstest/api/example/api/";

// This next one is just an example using query parameters. I just chose a random employee number: 
// const filteredOrdsApi = 'http://localhost:8080/ords/ordstest/api/example/api/?q={"empno":"7876"}';

const myList = document.querySelector("ul");

fetch(ordsApi).then((response) => {
    if (!response.ok) {
        throw new Error(`HTTP error, status = ${response.status}`);
    }
    return response.json();
}).then((data) => {
    for (const item of data.items) {``
        const listItem = document.createElement("p");

        const empnoElement = document.createElement("strong");
        empnoElement.textContent = item.empno;

        const enameElement = document.createElement("strong");
        enameElement.textContent = `${item.ename}`;
        
        const dnameElement = document.createElement("strong");
        dnameElement.textContent = `${item.dname}`;

        const jobElement = document.createElement("strong");
        jobElement.textContent = `${item.job}`;
        
        listItem.append(`Employee number `, empnoElement, ` was hired on ${item.hiredate}.`, ` Their last name is `, enameElement, ` and they work as a `, jobElement, ` in the `, dnameElement, ` department.`
            );
            myList.appendChild(listItem);
        }
    })
    .catch((error) => {
        const p = document.createElement("p");
        p.appendChild(document.createTextNode(`Error: ${error.message}`));
        document.body.insertBefore(p, myList);
    });

localhost.json

{
"items": [
{
"ename": "ADAMS",
"dname": "RESEARCH",
"job": "CLERK",
"empno": 7876,
"hiredate": "1987-05-23T00:00:00Z",
"loc": "DALLAS"
},
{
"ename": "ALLEN",
"dname": "SALES",
"job": "SALESMAN",
"empno": 7499,
"hiredate": "1981-02-20T00:00:00Z",
"loc": "CHICAGO"
},
{
"ename": "BLAKE",
"dname": "SALES",
"job": "MANAGER",
"empno": 7698,
"hiredate": "1981-05-01T00:00:00Z",
"loc": "CHICAGO"
},
{
"ename": "CLARK",
"dname": "ACCOUNTING",
"job": "MANAGER",
"empno": 7782,
"hiredate": "1981-06-09T00:00:00Z",
"loc": "NEW YORK"
},
{
"ename": "FORD",
"dname": "RESEARCH",
"job": "ANALYST",
"empno": 7902,
"hiredate": "1981-12-03T00:00:00Z",
"loc": "DALLAS"
},
{
"ename": "JAMES",
"dname": "SALES",
"job": "CLERK",
"empno": 7900,
"hiredate": "1981-12-03T00:00:00Z",
"loc": "CHICAGO"
},
{
"ename": "JONES",
"dname": "RESEARCH",
"job": "MANAGER",
"empno": 7566,
"hiredate": "1981-04-02T00:00:00Z",
"loc": "DALLAS"
},
{
"ename": "KING",
"dname": "ACCOUNTING",
"job": "PRESIDENT",
"empno": 7839,
"hiredate": "1981-11-17T00:00:00Z",
"loc": "NEW YORK"
},
{
"ename": "MARTIN",
"dname": "SALES",
"job": "SALESMAN",
"empno": 7654,
"hiredate": "1981-09-28T00:00:00Z",
"loc": "CHICAGO"
},
{
"ename": "MILLER",
"dname": "ACCOUNTING",
"job": "CLERK",
"empno": 7934,
"hiredate": "1982-01-23T00:00:00Z",
"loc": "NEW YORK"
},
{
"ename": "SCOTT",
"dname": "RESEARCH",
"job": "ANALYST",
"empno": 7788,
"hiredate": "1987-04-19T00:00:00Z",
"loc": "DALLAS"
},
{
"ename": "SMITH",
"dname": "RESEARCH",
"job": "CLERK",
"empno": 7369,
"hiredate": "1980-12-17T00:00:00Z",
"loc": "DALLAS"
},
{
"ename": "TURNER",
"dname": "SALES",
"job": "SALESMAN",
"empno": 7844,
"hiredate": "1981-09-08T00:00:00Z",
"loc": "CHICAGO"
},
{
"ename": "WARD",
"dname": "SALES",
"job": "SALESMAN",
"empno": 7521,
"hiredate": "1981-02-22T00:00:00Z",
"loc": "CHICAGO"
}
],
"hasMore": false,
"limit": 25,
"offset": 0,
"count": 14,
"links": [
{
"rel": "self",
"href": "http://localhost:8080/ords/ordstest/api/example/api/"
},
{
"rel": "describedby",
"href": "http://localhost:8080/ords/ordstest/metadata-catalog/api/example/api/"
},
{
"rel": "first",
"href": "http://localhost:8080/ords/ordstest/api/example/api/"
}
]
}

Live Server

I’m also using the Live Server extension for VS Code. If you don’t have it, you’ll need it to run the code I’ve provided. You can download it from the VS Code Marketplace here.

How I met your Mothra 👾

Where to start? From the beginning, right? What you see below are two JSON files. On the left, from ORDS. On the right, from the MDN Web Docs sample code (direct link to that file).

Comparing JSÒN

comparing-ords-and-mdn-json-files, chris hoina, db tools, ords, oracle database, javascript, html, ords api, oracle rest api — ORDS on the left, MDN on the right.

They are nearly identical. They are both a JSON object {} comprised of key: value pairs, where the first key’s value is an array []. In both files, this array has more objects {}. And each of those objects has its own key: value pairs…marone 🤌🏼!

I mention all this because this makes the existing code easy to work with. Which you’ll see shortly.

Comparing JavaScript

Next is the JavaScript code; I’ll compare both my version and the MDN Web Docs version.

You’ll notice that a lot of the code is quite similar. I kept it this way, so I wouldn’t unintentionally break anything. The main differences in my code are the:

const ordsAPI on Line 1 (as opposed to referencing a JSON file).
Naming conventions in lines 14-27.
listItem.append(); on line 29 is heavily remixed (I did this so I could create individual lines for each entry).
Templating in my code (i.e., wherever you see the little ``` marks; they allow you to embed text directly into the HTML) I use A LOT more of it!

About the ORDS JSON Object

If you were to navigate to your ORDS endpoint, it would look like the images below. I’m including them for a couple of reasons:

You can see those key: value pairs in a different presentation.
These images help connect what is coming through in that GET request and what you see in the JavaScript code.

an-example-of-ords-response-in-browser, chris hoina, db tools, ords, oracle database, javascript, html, ords api, oracle rest api — The `items` key with its value (an array).

the-raw-ords-response-in-browser, chris hoina, db tools, ords, oracle database, javascript, html, ords api, oracle rest api — Remember the other `key: value` pairs, too!

Reviewing the HTML

Assuming you’ve started up Live Server (along with setting up your environment to mimic my own), you’ll immediately see this beauty of a web page. This image alone doesn’t tell a complete story, though.

However, when you open up the developer tools in your browser, you’ll see what is happening under the covers.

Live Server starts up, sees the index.html file, and “serves” it up.
In that HTML file is a reference to script.js; the JavaScript is run.
The JavaScript composes a list and then appends all the data you see here (on screen):

html-with-developer-tools-to-inspect-html-and-javascript, chris hoina, db tools, ords, oracle database, javascript, html, ords api, oracle rest api — With developer tools open, you can see the HTML. This HTML should look similar to **lines 12-27** of the JavaScript code.

Summary

After writing this up, I’m realizing this clearly needs to be a video. But if you get it, great! Otherwise, stay tuned!

There isn’t anything ground-breaking here. I’m highlighting an example of manipulating existing ORDS JSON objects (with the Fetch API) because I hadn’t seen anything quite like what I am presenting here.

Also, the web page that I’m showing is very, very basic. I’m neither a UX nor UI designer, so this is what you get, folks!

The main point is that the ORDS APIs are effortless to work with if you have a fundamental understanding of manipulating JSON objects using JavaScript. They are no different than what you see out in the wild.

Some follow-up

I want to take this and add some React to it. And I’d also like to add authentication (Basic, OAuth 2.0, and Java Web Tokens). But baby steps.

Okay, that’s all for now, folks, Sayonara!

Follow

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

ORDS, JavaScript, the Fetch API, and HTML