jade inside jade variable

Question

I am slowly learning nodejs, express, and jade. Here is what I am trying to accomplish essentially:

  ul.nav

- var obj = { 'home':'i.icon-home.icon-white Home', 'about':'About' }
  - each val, key in obj
    - if (id == key)
      li.active
        a(href='#{key}') #{val}
    - else
      li
        a(href='#{key}') #{val}

Basically, I am trying to print a nav list but for the "Home" li I want to be able to show a little icon before it. But instead of compiling the jade in the variable to HTML it prints it out plain text (along with if I wrap it with the html I am trying to use. These conditions are essential to my program so any help would be very beneficial, thank you very much!!!

See this Answer on [stackoverflow](http://stackoverflow.com/questions/12366402/foreach-loop-in-jade-node-js-template-engine/37792678#37792678) — Mostafa Nawara, Jun 13 '16 at 14:46

timaschew · Answer 1 · 2015-08-23T11:01:58.180

5

If your line starts with a - you writing JavaScript. Otherwise it's jade.
Jade has its own condition and flow control constructs and keywords (each, if and else), so don't prefix them with a -

ul.nav
each val, key in obj
  if id == key
    li.active
      a(href='#{key}') #{val}
  else
    li
      a(href='#{key}') #{val}

edited Aug 23 '15 at 11:01

answered Feb 28 '15 at 20:35

timaschew

16,254
6
61
78

score 0 · Answer 2 · answered Mar 23 '13 at 02:35

0

I would switch up your jade a bit.

use a for on the obj like this:

-  for(var key in obj){
    a(href='#'+key)= obj[key]
-  }

answered Mar 23 '13 at 02:35

a_arias

3,036
2
21
20

http://pastebin.com/w3eCpZmw Doing that I get the error at the bottom of that paste, any ideas? – Cody Butz Mar 23 '13 at 02:44
What are you trying to do with the "if(id == key)" condition? where is id coming from. It looks to be like id is undefined. Also, is there any particular reason you are using an associative array here? – a_arias Mar 23 '13 at 06:11
Well, I am trying to accomplish a dynamic nav bar with bootstrap. If id = "home" then the Home nav button is "active." – Cody Butz Mar 23 '13 at 21:40
Any idea how to improve this? – Cody Butz Mar 23 '13 at 21:41

score 0 · Answer 3 · answered Feb 17 '17 at 08:51

0

inside 'href' type '#'+key

ul.nav
- var obj = { 'home':'i.icon-home.icon-white Home', 'about':'About'}     
each val, key in obj
  if id == key
    li.active
      a(href='#'+key) #{val}
  else
    li
      a(href='#'+key) #{val}

answered Feb 17 '17 at 08:51

Deepak Deepu

1
4

jade inside jade variable

3 Answers3