How to bring res.json data into a html page (same page)

JavaScript
1

Hello, I have been working on this for days but I still cannot figure it out. If anyone can tell me how to do this, I’d really appreciate it.

What I am working on is entirely different, but one of the freecodecamp projects will help me explain what I am trying to do:

So, in the project, Exercise Tracker (https://www.freecodecamp.org/learn/apis-and-microservices/apis-and-microservices-projects/timestamp-microservice), we had to use the form data to add an exercise, and then it will display the created res.json when button is clicked.

The question is: How do I display this res.json() in a HTML page. I don’t want to show something like { _id: dfjkdsfj, blah: fdksfj, blah: blahblah } on the newly directed page:

iknstead
iknstead896×34 2.11 KB

Instead, I want to show something like this on the same page as the res.json was shown:

forexample
forexample1735×426 8.22 KB

See the red arrows. I want to list out that json information on a page like that.

If anyone know the answer or can direct me to a guide on this, I’d appreciate it.

2

If you’re returning JSON data, it can’t be read in html other than as text, you will need JavaScript.
If you’ve already got a page that displays raw json, you can use ajax to make a request to that url and obtain the JSON, then process it into the document you want to display.

Have you got any code you can show? I’m not really sure what’s going with your application so all my comments are just guesses based on the second picture.

3

My code is a terrible mess right now because I have been trying so many different stuff.

Here is the work flow of my code:

  1. A form.
  2. Submit button
  3. Links to a different page (ex: /detail?name=blah?id=blah
  4. Using name and id, call to an API fetch to get the information I want.
  5. /detail?name=blah?id=blah now outputs a res.json page (like the one shown in the first picture).
  6. I want to convert that res.json page into the HTML one.

Do you have a video I can look at that does that thing you said? Most of the ones I could find already have the json object available. Those don’t really help because they don’t consider that I have to fetch the information from another API first.

Here, I cleaned up my code to make it readable:

I am not sure if it will work for you, but you can try typing in like “Urgot” for the first box, and then like “Doublelift” for the second box. You will see a res.json page.

4

My internet is a bit slow but I’m looking at it now. I did manage to submit a form so I can see what you mean.

5

This is the most basic idea of the solution I think you could try.

 fetch("https://accidental-tested-sweater.glitch.me/detail?champ=Urgot&players=Doublelift")
.then(res=>res.json())
.then(data=>console.log(data)) //data is here.

Run that line of code in the console and you will see the JSON appear

6

Right, but I know that. What I am not sure how to display a HTML file at that page and use that fetch at the same time too.

I can add the following to my code:
res.sendFile(process.cwd() + “/views/detailpg.html”);
in api.js

Then, the res.json no longer appears, and vice versa.

7

I’m struggling to update any code in glitch.

My idea was to use an Ajax request to get the data and then parse it on the screen.
To do this, first point the form to another page that returns detailpg.html page and change the server code to fulfil the JSON request at /api/detail.

In detailpg,html, add some javascript that reads the url parameters (location.pathname) , adds /api/ and use fetch to request the JSON.

8

I think you need to remix it to edit the code. Otherwise, you wouldn’t be able to. (And you need to get the API key too).

But, as for your suggestion, I am not really sure how to do that. Atleast, where to put those codes (in terms of files).

I will try to write here what I think you mean:

  1. Back in index.html, I could change action=‘detail’ to action=‘detailTwo’.
  2. Back in server.js, I put app.get("/detailTwo") -> and then what here? How do I return a page?
  3. Back in script.js (which is detailpg.html’s script) -> I am not sure how to do what you suggested.

Where exactly would I run apiRoutes(app); (Currently, it is in server.js)? It goes through all the api searching.

9

It’s not that, my internet connection was so poor it wasn’t loading the content.

I’ll give it another go.

10

Give that a go and let me know if it’s closer to solving the problem. The content displays in the console

1 Like
11

It works! Thank you so much!!! I can finally continue what I am working on.