2016-04-14 54 views
0

这里是我的代码:如何遍历多个对象在玉

extends ../layout 
block content 
    - 
    projects = [ { "name": "testProject", "status": "Active", "github": "", "slack": "", "trello", "" }, { "name": "testProject", "status": "Active", "github": "", "slack": "", "trello", "" } ] 

    div.container 
    // Nav tabs 
    ul.nav.nav-tabs(role='tablist') 
     li.active(role='presentation') 
     a(href='#active', aria-controls='active', role='tab', data-toggle='tab') Active 
     li(role='presentation') 
     a(href='#inactive', aria-controls='inactive', role='tab', data-toggle='tab') Inactive 
    // Tab panes 
    .tab-content 
     #active.tab-pane.active(role='tabpanel') 
     each project in projects 
      #projects 
      .media 
       .media-left 
       i.fa.fa-2x.fa-code.media-object 
       .media-body 
       h4.media-heading #{project.name} 
       span.label.label-success #{project.status} 
       span.label.label-warning Help Wanted 
       .links 
        span.github 
        i.fa.fa-code-fork 
        a(href='#{project.github}') GitHub 
        span.slack 
        i.fa.fa-slack 
        a(href='#{project.slack}') Slack 
        span.trello 
        i.fa.fa-trello 
       a(href='#{project.trello}') Trello 

我需要在阵列中的每个对象遍历并显示每一个用玉。我不知道该怎么办! 我跟着这些教程:

http://jade-lang.com/reference/code/ iterate over an array of objects in jade/pugjs

回答

0

使用=标志来访问属性:

-var projects = [{name: 'name1', link: "link1"}, {name: 'name2', link: 'link2'}] 

each project in projects 
    div 
    a(href=project.link)= project.name 

如果要插入的变量转换为字符串,使用#{var}符号:

a(href='my-link-#{project.link}')= project.name 
2

JSON对象似乎是有点过...试试这个

您的JSON看起来像这样“trello”, “”改变成这个“trello”: “” 这将验证你的json对象,以便它可以在每个循环中运行。

下面是一个例子:

projects = [ 
{ 
    "name": "testProject", 
    "status": "Active", 
    "github": "", 
    "slack": "", 
    "trello": "" 
}, 
{ 
    "name": "testProject", 
    "status": "Active", 
    "github": "", 
    "slack": "", 
    "trello": "" 
} ] 

只需复制和过去下方到您的文件,它应该工作!

projects = [ { "name": "testProject", "status": "Active", "github": "", "slack": "", "trello": "" }, { "name": "testProject", "status": "Active", "github": "", "slack": "", "trello": "" } ]