The most popular way to solve this problem is to store the data you obtain from the other API in your database, then create an endpoint that serves the most recent version of that data as JSON.
Then at the client side, you make periodic requests to the server to fetch the content and updates a part of the page to show the newest data available.
This could be as simple as:
// server side (if you use express)
app.get("/data", (req, res) => {
database.getMostRecentEntry()
.then(data => res.json(data))
.catch(err => res.status(500).end());
});
// client side
function fetchMostRecentData() {
fetch("/data")
.then(response => response.json())
.then(data => updateView(data))
.catch(err => showError(err));
}
function updateView(data) {
let container = document.getElementById("app");
container.innerHTML = `
<tr>
<td>${data.name}</td>
<td>${data.value}</td>
</tr>
`;
}
function showError(err) {
console.error(err);
alert("Something went wrong");
}
// call fetchMostRecentData once every 10s
setInterval(fetchMostRecentData, 10000);
Now, this isn't a very robust solution and there are some fairly serious security problems, but it's a starting point.
From here, you should look into using a frontend framework (rather than updating innerHTML yourself). You could also look at using websockets, rather than serving the data through a HTTP endpoint.
