Express / Node.js - Render page with data

Question

I have a list of Teams displayed as a list of links on my page, at the moment, I have a textbox....when the link for that Team is clicked, the Key for that Team is taken and sent to the /team/:key route, it searches for the Team by Key, gets the data and sends the data back. If the data was successfully sent back to the JS file then the Team name is output to the textbox.

I want to change this, when the link is clicked and the data has been retrieved using Team.findByKey I want to render a new page ('teamDetails') and pass it the data for that Team. This way I can make it so that each link for a Team links to the Team's individual page with their full details on it.

Any idea how I would adapt this /team/:key route to do this?

JS file

// Setup teamsLink to retrieve Team info for whichever Team was clicked
Team.initTeamsLink = function(){
  $("a.teamLink").live("click", function(e){
    e.preventDefault();
    var teamId = ($(this)[0]).getAttribute('id');

    $.get('/team/'+teamId, function(response){
      if(response.retStatus === 'success'){
        var teamData = response.teamData;
        $('#teamId').val(teamData.key);
        $('#teamName').val(teamData.name);
      } else if(response.retStatus === 'failure'){

      }
    });  
  });
 };

Route

  app.get('/team/:key', function(req, res) {
    util.log('Serving request for url [GET] ' + req.route.path);
    Team.findByKey(req.params.key, function(err, teamData){
      if(!err && teamData){
        teamData = teamData;
        res.json({
          'retStatus' : 'success',
          'teamData' : teamData
        });
      } else {
        util.log('Error in fetching Team by key : ' + req.params.key);
        res.json({
          'retStatus' : 'failure',
          'msg' : 'Error in fetching Team by key ' + req.params.key
        });
      }
    });
  });

Yes, when the link is clicked at the moment, a JSON response is sent to the page in order to put the Team's name into a textbox. Instead I want to render a HTML page I have (teamDetails.jade is the page), I want to pass the Team's details to this page when rendering so that I can create a page for each team when the links are clicked. — germainelol
– germainelol, Commented Mar 7, 2013 at 12:21

MrPovod · Accepted Answer · 2013-03-07 13:06:05Z

2

Use handlebars templates - http://handlebarsjs.com/

npm install handlebars
npm install hbs

Coffe-script:

hbs = require 'hbs'

app.set 'views', __dirname + '/app/views' #folder with your views
app.set 'view engine', 'hbs'
app.use express.bodyParser()
app.use express.methodOverride()

In the router:

res.render 'index', {title: 'index'} #view name and context

answered Mar 7, 2013 at 13:06

MrPovod

1936 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

robertklep · Accepted Answer · 2013-03-07 12:21:36Z

0

Instead of res.json(), you could use a templating engine which would render the individual team's page. Say you want to use EJS templates:

npm install ejs

Next, create views/team.ejs, which would contain the EJS template for the team. In your route, replace res.json() with a call to the templating engine:

res.render('team.ejs', { 'teamData' : teamData });

EDIT: just read your comment about using Jade templates: the code is very similar, just replace team.ejs with teamDetails.jade.

Also, you probably can remove your client-side code which handles click events on the links, since you don't want to perform an AJAX request anymore.

answered Mar 7, 2013 at 12:21

robertklep

205k38 gold badges421 silver badges413 bronze badges

13 Comments

germainelol Over a year ago

Yes, I have replaced the res.json() code with res.render('teamDetails'); but nothing happens when the links are clicked. I added in a simple little util.log('rendering page') to check it is actually getting to this point of the code and it is, but the page isn't being rendered. Any idea? What do you mean about removing the client-side code? I will still need to listen for when a Team link is clicked surely?

robertklep Over a year ago

I would just generate proper HREF's in those links to point to the team-pages, but if that's not possible (should be though, since you're placing the team id's in the id attribute), replace $.get() with location.href = "/team/" + teamId;.

germainelol Over a year ago

Interesting, I will look at this as well then, do you know why the page isn't rendering like I said?

robertklep Over a year ago

You're trying to perform an AJAX request (using $.get()) on what is now a route that generates HTML, whereas your client side code still assumes a JSON response.

robertklep Over a year ago

@LV98 with Handlebars you can use {{{output}}} to prevent HTML escaping. I agree that it's certainly worth it to check out React in more detail :D

|

Collectives™ on Stack Overflow

Express / Node.js - Render page with data

2 Answers 2

Comments

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related