How to retrieve data from server of a selected item in HTML

Question

I'm trying to create a website and i need to retrieve the full data of a selected item preview.

For example: Amazon gives you all the products matching your search query, and then you can click on them to get to single product page. I would like to do the same thing.

So far i have already written my search and dynamic load of items into my page:

1) I have a node.js server which responds to a get request with a JSON file containing a list of elements (in my case, doctors)

app.get('/doctors', function(req,res){
  var config = require('./doctor.json');
  config.forEach(function(dottore) {
    var tableName = dottore.name;
    console.log(tableName);
    });
  res.send(JSON.stringify(config));
})

2) I make the request from my client side javascript like this:

$.get( '/doctors', function(data) {
$("<div class='row' id='dottori' ></div>").appendTo(".team");    
console.log(typeof data)

JSON.parse(data).map(addElement);    
 });

function addElement(doctor){
  console.log("Adding doctor");
  id=doctor.id;
  console.log(id);
  $("#dottori").append('<div class="col-md-4 ml-auto mr- 
              auto"><a href="./personaleGenerico.html" class="card card- 
        profile card-plain"><div class="btn btn-primary card-header card-header-image image-camminiamo"><img class="img" src="../assets/img/faces/4.jpg"></div><div class="card-body "><h3 class="card-title">'+doctor.name+'</h3><h4>Dott. in '+doctor.job+'</h4></div></a></div>');

}

And it works fine.

What i need to do now is to click on the preview of my doctor and load the page personaleGenerico.html, which should contain the full informations about that doctor.

I don't know how to associate the data on my server (which is a JSON containing all the informations of all doctors) to the element i've clicked.

For example: if i click the first doctor called "John", i will move to the page personaleGenerico.html filled with the information of that specific doctor (that are all avaiable in my JSON file)

Answer 1

I think there is two main way.

1 - rendering on server

You can use some html generator like pug, and your server response with a full html page with all info.

2 - rendering on client

Use AJAX call for fetch json info and then put data in html elements. There is a lot of frameworks for dynamically create html elements from data: vuejs , angular,... However you can do it also in vanilla javascript creating html element with data and inject these into the DOM.

From what you say i think you want the rendering on server, if you use expressjs see this example

EDIT

Edit based on the comment response.

Assume that your data item has an identifier. You have to create a route on server like this:

app.get('/doctor/:id', function(req, res){
    const doctorId = req.params.id;
    const doctors = require('./doctor.json');
    // I assume doctors is an Array
    const doctor = doctors.find(item => {
        return item.id === doctorId;
    });
    // you can response directly in JSON not need stringify/parse
    res.json(doctor);
});

you have also handle the case where doctor not exists. Then you can call this route for fetch data.

Answer 2

you'll need another backend endpoint that executes a different config/DB query. For that you'll need to send the ID of the doctor from the front end via URL params. see: How to get a URL parameter in Express?

ie:

app.get('/doctors/:id', function(req, res){
  var config = require('./doctor.json');
  const selectedDoctor = config.filter(function(doctor) {
      var tableName = doctor.name;
      console.log(tableName);
      return doctor.name === req.params.id
    });
  res.send(JSON.stringify(selectedDoctor));
})