HTML-Seite mit JS aus JSON generieren

7

Ich suche nach einem sehr grundlegenden Beispiel der Verwendung von Javascript, um eine JSON-Datei zu analysieren und eine HTML-Datei auszugeben oder eine HTML-Datei zu füllen. Alle Beispiele, die ich bisher gefunden habe, haben Code-Snippets und ich habe nicht den Hintergrund, um die Lücken dazwischen zu füllen.

Danke für alle Geigen (was super wäre), Links und Smart A * s Kommentare.

    
rd42 08.03.2012, 21:39
quelle

5 Antworten

13

Sie können eine Mikrotemplatbibliothek wie Moustache verwenden, um eingehende JSON-Objekte mit der {{ key }} -Templatesyntax in HTML-Snippets zu analysieren. Wenn Ihr Objekt wie folgt aussieht:

%Vor%

Mit Mustache können Sie es leicht in HTML rendern, indem Sie {{#}} und {{/}} verwenden, um verschachtelte Objekte zu durchlaufen:

%Vor%

welche Ausgaben:

Hallo, mein Name ist Joe Smith und ich bin 25 Jahre alt. Ich habe rote Haare und blaue Augen.

EDIT: relevantere Anwendung - Erzeugen Sie dynamisch ein Control Panel mit einer Vorlage mit verschachtelten Listen von Objekten. Hier sind meine Vorlage und mein Objekt (HTML in eine Liste aufgeteilt und zur besseren Übersicht zusammengefügt):

%Vor%

Dann renderst du mit Moustache:

%Vor%

welche Ausgaben:

%Vor%     
david 08.03.2012, 23:19
quelle
14

Beispiel für Templating

Ich würde vorschlagen, Templating-Tools zum Beispiel PURE ...

Der Zweck eines solchen Tools ist die Trennung von Logik und Repräsentation.

Beispielsweise würde das Erstellen einer Liste aus JSON-Daten mit dem erwähnten Tool wie folgt aussehen:

JSON-Datendatei

%Vor%

HTML-Datei

%Vor%

Dies ist der einfachste Ansatz, wenn Sie einfache JSON-Daten haben (siehe dort ). Get Started führt Sie durch ein anderes Beispiel, wenn die grundlegende Vorgehensweise nicht geeignet ist. Weitere Funktionen finden Sie in der Dokumentation .

Alternativen

Es gab keinen besonderen Grund dafür, dass PURE im obigen Beispiel verwendet wurde. Sie haben viele Alternativen da draußen:

... oder Sie können es manuell tun, wie dort erklärt.

    
PrimosK 09.03.2012 00:38
quelle
3

Vielleicht möchten Sie sich jQuery.dForm ansehen. Es hilft beim dynamischen Erstellen von HTML und Formularen mit JSON.

    
Sasi 07.10.2012 18:49
quelle
2

Also nehme ich an, Sie meinen, dass Ihr JSON die HTML-Zeichenfolge darin enthält.

lässt sagen, Ihr JSON ist:

%Vor%

Sie können dies in Ihrem HTML-Code rendern, indem Sie Ihren HTML-Code wie folgt schreiben:

%Vor%

Beachten Sie, dass Sie mit AJAX auch Ihren JSON abrufen und rendern können Beachten Sie jedoch, dass das Einbetten von HTML in JSON beim Transport vom Server als Sicherheitsrisiko gilt. Stattdessen können Sie einen Teil-HTML-Code direkt vom Server mithilfe von AJAX abrufen und dann Teile des HTML-Codes (Vorlage) durch dynamische Werte mithilfe von javascrip und REST / SOA ersetzen

hoffe das hilft

    
Vijay Agrawal 08.03.2012 21:49
quelle
0

EJS oder eingebettetes Java Script, das nett und unterhaltsam ist. Sie könnten ein Front-End-Framework wie Backbone oder facebooks React verwenden, das viel komplexer ist. Es gibt einige gute Video-Tutorials in der Knotenschule von Codeschool für EJS. Hier ist ein Beispiel

%Vor%

mit EJS ist so einfach wie:

%Vor%

um den Text zu bekommen: "gehe nach SF, um jetzt zu feiern"

Mit EJS, oder meinem fav PEJS können Sie tun, wenn, wechseln, für (), Datum () ..... Sie bekommen den Punkt. schau hier nach Pejs und lies auch EJS . Viele coole Sachen, die du machen kannst

    
Peter the Russian 19.02.2015 17:50
quelle

Tags und Links