CODEWITHSUNDEEP
javascriptjsonnode.jspug
germainelol
germainelol

Reputation: 3331

JSON / Jade - Cannot output JSON variable to Jade template

I'm passing some JSON data to a Jade template, but can't seem to print the JSON data to my Jade template. This is an example of the JSON which is stored and passed to the Jade template:

{ name: 'Team 1',
  _id: 5134d71192cf972226000003,
  __v: 0,
  key: 1362417425623 }

It is passed through to the Jade template like so:

res.render('tournamentDetails', { 'tournamentData' : tournamentData, seedsSerialized : JSON.stringify(tournamentData.teams) } );

The format of the Jade template is:

script(type='text/javascript')
                var seeds = [#{tournamentData.teams}];

I'm trying to access this variable seeds in a seperate JavaScript file, but cannot seem to access them. I have been testing using alert to test what is in seeds in the JavaScript file and it is not the teams.

This is the generated HTML from the Jade too:

var seeds = [{ name: 'Team 1',
  _id: 5134d71192cf972226000003,
  __v: 0,
  key: 1362417425623 },{ name: 'Team 2',
  _id: 5139dc66b48da58d0e000001,
  __v: 0,
  key: 1362746470498 },{ name: 'Team 3',
  _id: 5139dda45f1598440f000001,
  __v: 0,
  key: 1362746788314 },{ name: 'Team 4',
  _id: 513b2c66cfd50dce11000001,
  __v: 0,
  key: 1362832486554 }];

How would I access the teams in a JavaScript file? I am wanting to output the names of the teams to the Jade template.

Upvotes: 0

Views: 2222

Answers (1)

Bret Copeland
Bret Copeland

Reputation: 23990

This may not be an answer exactly, but it was too long for a comment...

Look at this jsfiddle: http://jsfiddle.net/KvXTA/

var seeds = [{ name: 'Team 1',
  _id: 5134d71192cf972226000003,
  __v: 0,
  key: 1362417425623 },{ name: 'Team 2',
  _id: 5139dc66b48da58d0e000001,
  __v: 0,
  key: 1362746470498 },{ name: 'Team 3',
  _id: 5139dda45f1598440f000001,
  __v: 0,
  key: 1362746788314 },{ name: 'Team 4',
  _id: 513b2c66cfd50dce11000001,
  __v: 0,
  key: 1362832486554 }];

console.log(seeds);

notice how the console outputs

Uncaught SyntaxError: Unexpected token ILLEGAL

That's because of the _id fields. I'm surprised you say that the serialized version has the same problem, since it should have surrounded the ID's in quotes. If you don't need the ID's at all, you can get rid of them in the serialized version by using a replacer function.

var seedsSerialized = JSON.stringify(teams, function (key, val) {
    return key === '_id' ? undefined : val;
);
res.render('tournamentDetails', { seedsSerialized: seedsSerialized });

Then use that serialized version to initialize seeds in the template.

script
    var seeds = !{seedsSerialized};

My earlier comment about order of including scripts wasn't a concern that maybe another file was creating a seeds variable, it was that you might have been including a file which used seeds before seeds was actually declared.

For example:

<script src='logSeeds.js'></script>
<script>
    var seeds = [ ... ];
</script>

where logSeeds.js is:

console.log(seeds);

would obviously output undefined since seeds hasn't been declared yet. It was just a thought, not necessarily your situation.

Upvotes: 1

Related Questions