title: Nunjucks iterate over items in an array to display items in object
body: <p>In javascript I can loop over an array to output my object as shown below.</p>
  
  <pre><code>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);
  });
  </code></pre>
  
  <p>outputs</p>
  
  <p><code>ones this is one</code></p>
  
  <p><code>twos this is two</code></p>
  
  <p><code>threes this is three</code></p>
  
  <pre><code>console.log("number 2 - ",myObj[myArr[1]].desc)
  console.log("number 2 - ",myObj["two"].desc)
  </code></pre>
  
  <p>outputs</p>
  
  <p><code>number 2 -  this is two</code></p>
  
  <p><code>number 2 -  this is two</code></p>
  
  <p>I want to be able to do this in nunjucks as I want to control the order of display from <code>myArr</code> but also want the flexibility to be able to have a single page eg one.html where I can target one specifically eg <code>{{testObj.one.title}}</code>.</p>
  
  <p>How can this be acheived with nunjucks? I have tried the below.</p>
  
  <pre><code>-- nunjucks --
  &lt;ul&gt;
    {% for item in testArr %}
      &lt;li&gt;{{item}} - {{testObj.one.title}}&lt;/li&gt;
    {% endfor %}
  &lt;/ul&gt;
  
  &lt;ul&gt;
     {% for obj, item in testObj %}
        &lt;li&gt;{{ obj }}: {{ item | dump }} - {{ item.title }} - {{ item.desc }}&lt;/li&gt;
     {% endfor %}
  &lt;/ul&gt;
  
  --- output ---
  &lt;ul&gt;
    &lt;li&gt;one - ones&lt;/li&gt;
    &lt;li&gt;two - ones&lt;/li&gt;
    &lt;li&gt;three - ones&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul&gt;
    &lt;li&gt;one: {"title":"ones","desc":"this is one"} - ones - this is one&lt;/li&gt;
    &lt;li&gt;three: {"title":"threes","desc":"this is three"} - threes - this is three&lt;/li&gt;
    &lt;li&gt;two: {"title":"twos","desc":"this is two"} - twos - this is two&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>My ideal output to get to would be like the below where I can order my display based on <code>myArr</code> but for each item show the contents of their key in <code>myObj</code></p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;one - ones&lt;/li&gt;
    &lt;li&gt;two - twos&lt;/li&gt;
    &lt;li&gt;three - threes&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>