CODEWITHSUNDEEP
node.jsexpresspug
mirta
mirta

Reputation: 658

Can't pass a variable from Node.js to Jade

I have this few lines of code:

var base="http://www.youtube.com/watch?v=";
var videoID=result.items[0].id.videoId;
var link=base+videoID;
console.log(link);

In console log I see perfectly the value of the variable "link". When I try to use that same variable in Jade, I get nothing.. 

p This is the link of the movie trailer:#{link}

I don't know what am I doing wrong.. I have already used this syntax #{} (even in this file!) and it works like a charm...

Any suggestions?

This is the full code:

app.js

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var config = require('./config');
var http = require('http');
var movies = require('./routes/movies');
var omdb = require('omdb');
var fs = require('fs');
var request = require('request');
var cheerio = require('cheerio');
var app = express();
var YouTube = require('youtube-node');

    /* Main Function */

    app.post('/findMovie', function(req, res){

    var headline= req.body.movie;

    /* Imdb API */

    omdb.get({ title: headline}, true, function(err, movie) {
        if(err) {
            return console.error(err);
        }
        if(!movie) {
            return console.log('Movie not found!');
        }
        t=movie.title;
        poster=movie.poster;
        y=movie.year;
        r=movie.imdb.rating;
        d=movie.director;
        a=movie.actors;
        p=movie.plot;

       res.render('./movies/results');
    });

    /* Getting all the info about a video*/
    var youTube = new YouTube();
    youTube.setKey('my_key_api');
    youTube.search(headline, 2, function(error, result) {
      var base="http://www.youtube.com/watch?v=";
      var videoID=result.items[0].id.videoId;
      var link=base+videoID;
      if (error) {
        console.log(error);
      }
      else {  
        console.log(headline);
        console.log(link);
      }
    });
    });

results.jade

extends ../default/layout
block content
div.container
div.grad.mov
div.header.mov
    div
        span Movie
form.movies(action='/findMovie', method='post')
    input(type='text' id="movie" name='movie' placeholder='type the name of  
    the movie')
    input(type="submit" id="search" name="search_movie" value='Search')

    div#ajax   
        h1#mov #{t}
        div#left
            img(src="#{poster}")
        div#right
            p#detail Year of the movie: 
                <span>#{y}</span><br>IMDb user rating: 
                <span>#{r}</span><br>Director: 
                <span>#{d}</span><br>Actors: 
                <span>#{a}</span><br><br>
                <span>The plot: </span>#{p}<br>
        div#player
        p#detail This is the URL:#{link}

Upvotes: 1

Views: 870

Answers (1)

Jonathan Lonowski
Jonathan Lonowski

Reputation: 123423

Jade doesn't actually consider global variables within the template. It expects t, poster, etc. to be members of a locals object that's provided to it.

h1#mov #{t}
h1#mov #{locals.t}

With Express, locals can be provided with res.locals (and app.locals):

res.locals.t = movie.title;
res.locals.poster = movie.poster;
res.locals.y = movie.year;
res.locals.r = movie.imdb.rating;
res.locals.d = movie.director;
res.locals.a = movie.actors;
res.locals.p = movie.plot;

As well as in the 2nd argument to res.render():

res.render('./movies/results', {
    t: movie.title,
    poster: movie.poster,
    y: movie.year,
    r: movie.imdb.rating,
    d: movie.director,
    a: movie.actors,
    p: movie.plot
});

Upvotes: 3

Related Questions