2016-07-26 19 views
1

ich einen Build-Skript, das meinen Stift erfüllt und übergibt einige Daten in.Iterieren über verschachtelte Objekte in Stylus

stylus(stylFile) 
    .set('filename', 'index.css') 
    .define('data', require('./data.json')) 
    .render(...) 

Die data.json Datei enthält ein Objekt von Gruppen und jede Gruppe von mehreren Objekten zusammengesetzt ist, das repräsentieren Gegenstände.

{ 
    "group1": { 
    "item1": { 
     "width": 1 
    }, 
    "item2": { 
     "width": 2 
    } 
    }, 
    "group2": { 
    "item3": { 
     "width": 3 
    } 
    } 
} 

In meinem Stylus-Datei möchte ich durch die Gruppen zu durchlaufen, und dann durch ihre Produkte wie so

for group, items in data 
    #{group} 
    for id, item in items 
     #{id} 
     width item.width 

ich die Ausgabe von dieser erwarten würde

#group1 #item1 { 
    width: 1; 
} 
#group1 #item2 { 
    width: 2; 
} 
#group2 #item3 { 
    width: 3; 
} 

Statt sein Ich bekomme

ParseError: index.css:118:1 
    114| #{group} 
    115|  for id, item in items 
    116|  #{id} 
    117|   width item.width 
    118| 
--------^ 

expected "indent", got "outdent" 
+0

ich das Gefühl, dass dies etwas mit Stylus' in ‚Hashes‘ gebaut zu tun hat, die meine Daten müssen genötigt. – arkanciscan

Antwort

1

Ich weiß nicht, wie Sie die json in Stift bekommen, aber mit Hash-Objekte Sie dies tun können:

STYLUS

data={ 
    "group1": { 
    "item1": { 
     "width": 1 
    }, 
    "item2": { 
     "width": 2 
    } 
    }, 
    "group2": { 
    "item3": { 
     "width": 3 
    } 
    } 
} 

for group in data 
    #{group} 
    items = data[group] 
    for item in items 
     #{item} 
     for property, value in items[item] 
      {property} value 

OUTPUT

#group1 #item1 { 
    width: 1; 
} 
#group1 #item2 { 
    width: 2; 
} 
#group2 #item3 { 
    width: 3; 
} 

UPDATE

Sie können die json von Stift-Datei erhalten und in Hash-Objekt konvertieren:

data = json('data.json', { hash: true }) 

for group in data 
    #{group} 
    items = data[group] 
    for item in items 
     #{item} 
     for property, value in items[item] 
      {property} value 
+0

Ich bekomme den Json in Stylus mit der Funktion 'define()' in meinem Build-Skript. Also öffnet NPM das JSON, wandelt es in ein JS-Objekt um und gibt es dann an Stylus weiter, was ich vermute, dass es in einen Hash umgewandelt wird. – arkanciscan

+0

Entschuldigung, aber Ihre Lösung funktioniert nicht, wenn ich Daten von JSON verwende. Ich bekomme '#id # { (null): 0; } 'für jedes Element wiederholt. – arkanciscan

+0

Ich bearbeite meine Antwort, vielleicht ist es nützlich für Sie – blonfu

Verwandte Themen