2016-09-21 8 views
0

В javascript я могу перебрать массив для вывода моего объекта, как показано ниже.Nunjucks перебирает элементы в массиве для отображения элементов в объекте

var myArr = ["one","two","three"] 
var myObj = { 
    "one": { 
    "title": "ones", 
    "desc": "this is one" 
    }, 
    "three": { 
    "title": "threes", 
    "desc": "this is three" 
    }, 
    "two": { 
    "title": "twos", 
    "desc": "this is two" 
    } 
} 

myArr.forEach(function (value) { 
    console.log(myObj[value].title, myObj[value].desc); 
}); 

выходы

ones this is one

twos this is two

threes this is three

console.log("number 2 - ",myObj[myArr[1]].desc) 
console.log("number 2 - ",myObj["two"].desc) 

выходы

number 2 - this is two

number 2 - this is two

Я хочу быть в состоянии сделать это в nunjucks, как я хочу, чтобы контролировать порядок отображения из myArr, но также нужна гибкость, чтобы иметь возможность иметь одну страницу, например one.html, где Я могу настроить таргетинг, например, {{testObj.one.title}}.

Как это можно получить с помощью nunjucks? Я попробовал следующее.

-- nunjucks -- 
<ul> 
    {% for item in testArr %} 
    <li>{{item}} - {{testObj.one.title}}</li> 
    {% endfor %} 
</ul> 

<ul> 
    {% for obj, item in testObj %} 
     <li>{{ obj }}: {{ item | dump }} - {{ item.title }} - {{ item.desc }}</li> 
    {% endfor %} 
</ul> 

--- output --- 
<ul> 
    <li>one - ones</li> 
    <li>two - ones</li> 
    <li>three - ones</li> 
</ul> 

<ul> 
    <li>one: {"title":"ones","desc":"this is one"} - ones - this is one</li> 
    <li>three: {"title":"threes","desc":"this is three"} - threes - this is three</li> 
    <li>two: {"title":"twos","desc":"this is two"} - twos - this is two</li> 
</ul> 

Мой идеальный выход, чтобы добраться до будет как ниже, где я могу заказать мой дисплей на основе myArr, но для каждого элемента показать содержимое их ключа в myObj

<ul> 
    <li>one - ones</li> 
    <li>two - twos</li> 
    <li>three - threes</li> 
</ul> 

ответ

2
<ul> 
    {% for item in myArr %} 
    <li>{{item}} - {{myObj[item].title}}</li> 
    {% endfor %} 
</ul> 

?

+0

Спасибо за помощь! Я думал, что пробовал что-то вроде этого, это работает, как и ожидалось. – ak85