Schleife durch Objekt in Nunjacks?

Question

Ich habe eine Datei mit dem Namen „list.json“ wie folgt ein:

{ 
    "thing1": "Thing1", 
    "thing2": "Thing2", 
    "thing3": "Thing3" 
} 

Wie kann ich durch diese Schleife? Ich möchte wie etwas tun:

{% for item in list%} 
    <option>{{ thing }}</option> 
{% endfor %} 

Answer 1

Sie können versuchen, folgende

{% for key, item in list%} 
    <option>{{ item }}</option> 
{% endfor %} 

Answer 2

Wenn Sie Gulp verwenden, diese können Ihnen helfen: http://www.zell-weekeat.com/nunjucks-with-gulp#Populating-HTML-with-data

Answer 3

Haben Sie die JSON importiert? Wenn nicht, in der Render JS, fügen Sie eine Variable:

list: JSON.parse(fs.readFileSync('list.json')) 

Wenn Sie es mehrmals verwenden, anstatt eine Variable am Anfang der Datei hinzufügen.

var LIST = JSON.parse(fs.readFileSync('list.json')) 

Es ist auch möglich, die asynchrone Methode zu verwenden, aber Sie müssen einige Verschachtelung:

fs.readFile('list.json', function(err, list) { 
    env.render('template.html', { 
     list: list, 
     //other data 
    } 
} 

Answer 4

Sie sollten zunächst ein Array von Objekten in Back-End erstellen:

var things = []; 

things.push({id : 'thing1', name : 'Thing1'}); 
things.push({id : 'thing2', name : 'Thing2'}); 
things.push({id : 'thing3', name : 'Thing3'}); 

Jetzt auf Front End Sie würden in der Lage sein, durch dieses Array wie folgt zu durchlaufen:

{% for thing in things %} 
<option value="{{ thing.id }}"> {{ thing.name }}</option> 
{% endfor %} 

Ich hoffe, das wird Ihnen helfen.