2017-10-23 2 views
0

Ich versuche, eine dynamische Zeile/Spalte (früher bekannt als Tabellen) in Mops aus einem JSON-Objekt mit Res.Render in node.js."jedes Element in der Gruppe" in Mops zeigt keinen Wert

Mein Problem ist, dass einfache Werte mit Leichtigkeit angezeigt werden, aber komplexere Operationen wie die Zeilen-/Spalten-Definition für eine dynamische Anzahl von Elementen (hier handelt es sich um Mediendateien für ein bestimmtes Hörbuch) werden nicht aufgefüllt. Hier

ist das Snippet mit dem jeder ... Block von meiner Vorlage-Datei:

div.form-group 
    div.row 
    div.col-2 
     label(for='varMediaTitle') Titel: 
    div.col 
     input#MediaTitle.form-control(type='text', placeholder=varMediaTitle, name='varMediaTitle', required) 
div.form-group 
    div.row 
    div.col-4 
     label(for='MediaFileName') Audio Dateien: 
    div.row 
    div.col-1 Nr 
    div.col-5 Name 
    div.col-2 Groesse 
    each mediaFile in varMediaFiles 
    div.row 
     each itemM in mediaFile 
     div.col-1 
      p #{itemM.part} 
     div.col-5 
      p #{itemM.name} 
     div.col-2 
     p #{itemM.size} 
    div.row 
    div.col 
     input#MediaFileName.form-control(type='file', name='MediaFileName', required) 

Wie gesagt, einfache Elemente in der Vorlage, wie ein Medientitel, die ich einfach in einem Eingabefeld zeigen (ohne Iteration) werden korrekt angezeigt, aber der Block mit jeder MediaFile in varMediaFiles zeigt keinen Inhalt an.

Interessanterweise kann ich beim Überprüfen des resultierenden HTML die korrekte Anzahl der Zeilen sehen. Das heißt, die Anzahl der erstellten Zeilen entspricht der Anzahl der Elemente in meiner JSON-Datei.

html inspection in chrome

Hier können Sie meinen Anruf Form von meiner node.js Funktion sehen:

res.render('tags', { 
       title: 'RFID Tag Datenseite', 
       headline: 'RFID Tag Daten', 
       subheadline: 'Tag ' + obj.TagId + ' - ' + obj.MediaTitle, 
       varTagId: obj.TagId, 
       varTagPreTag: obj.TagPreTag, 
       varTagChecksum: obj.TagChecksum, 
       varTagRawData: obj.TagRawData, 
       varMediaTitle: obj.MediaTitle, 
       varMediaType: obj.MediaType, 
       varMediaGenre: obj.MediaGenre, 
       varMediaDescription: obj.MediaDescription, 
       varMediaFiles: obj.MediaFileName, 
       varMediaPictures: obj.MediaPicture 
      }); 

Und das ist die Struktur der JSON-Datei (es ist eine tatsächliche Datei eingelesen von Dateisystem), aus denen die Werte in das Formular übergeben werden:

{ 
    "TagChecksum": "0x97", 
    "TagId": "759C71", 
    "TagPreTag": "0xf00", 
    "TagRawData": "0F00759C7197", 
    "MediaTitle": "The 6th book", 
    "MediaType": "Audiobook", 
    "MediaGenre": "UNDEFINED", 
    "MediaDescription": "Beschreibung", 
    "MediaFileName": [{"part": "1", "name": "1st-file.mp3", "size": "6M"}, {"part": "2", "name": "2nd-file.mp3", "size": "8M"}], 
    "MediaPicture": [{"pic": "1", "name": "1st-pic.jpg"}, {"pic": "2", "name": "2nd-pic.jpg"}, {"pic": "3", "name": "3rd-pic.jpg"}] 
} 

Jede Idee, warum einfache Werte ohne Iteration Arbeit, sondern eine Iteration über einen json-Array nicht ???

Mein erster Gedanke war, dass es, weil es und Array innerhalb einer JSON-Struktur ist und dass ich ein Problem mit dem Format der JSON-Datei haben könnte. Aber in diesem Fall kann ich nicht verstehen, warum jeder ... Block die Anzahl der Zeilen korrekt erstellt.

Es gibt jedoch einen zusätzlichen Fehler. Nach der Überprüfung der HTML-Ausgabe (siehe angehängtes Bild) bemerkte ich, dass die Iteration tatsächlich die korrekte Anzahl von Zeilen erzeugt (hier 2 für die Mediendateien), aber viel zu viele Spalten für jede Zeile. Es sieht so aus, als würde es alle Spalten aller Zeilen in allen Zeilen setzen - sehr seltsam.

Kann jemand etwas Licht darauf werfen?

Mit freundlichen Grüßen und vielen vielen Dank,

Christian

Antwort

0

Habe ich es endlich heraus und dachte, da es keine Antwort überhaupt auf diese Frage war aber ganz wenigen Ansichten, es könnte sich lohnen zu Post die Lösung, damit andere Neulinge wie ich es finden können.

Die Lösung war eigentlich ganz einfach.

Die zweite Iteration (das ist der jeder itemM ... Block von meiner Frage oben) war völlig Unsinn und ich habe es einfach losgeworden. Anstatt die Elemente innerhalb einer der json-Array-Strukturen zu durchlaufen, habe ich sie direkt referenziert.

Ich auch "jeder" als eine Aussage mit "für" ausgetauscht, aber ich bin mir nicht sicher, ob dies notwendig ist.

Am Ende, mein jeder ...Block (das hat nicht funktioniert):

each mediaFile in varMediaFiles 
    div.row 
     each itemM in mediaFile 
     div.col-1 
      p #{itemM.part} 
     div.col-5 
      p #{itemM.name} 
     div.col-2 
     p #{itemM.size} 

wurde dies für ... Block (das funktioniert):

for mediaFile in varMediaFiles 
     div.row 
     div.col-1 
      p #{mediaFile.part} 
     div.col-5 
      p #{mediaFile.name} 
     div.col-2 
      p #{mediaFile.size} 

Der Grund dafür ist ziemlich klar, wenn ich es herausgefunden. Ich habe kein geschachteltes Array - in diesem Fall hätte wahrscheinlich eine verschachtelte "for" oder "for-Schleife" den Trick gemacht. Ich habe eine JSON-Struktur mit einer Reihe von JSON-Elementen.

[{"part": "1", "name": "1st-file.mp3", "size": "6M"}, {"part": "2", "name": "2nd-file.mp3", "size": "8M"}], 

Jedes Element dieses Arrays ist wieder eine JSON-Struktur. Da es sich um eine JSON-Struktur handelt, kann ich einfach den Teil des JSON-Elements anhand des Namens referenzieren, während ich durch die Array-Elemente iteriere.

Manchmal ist es eigentlich einfacher, als man meinen könnte.

Glücklich Codierung alle,

Christian

Verwandte Themen