web-dev-qa-db-fra.com

Générer automatiquement du HTML à partir de JSON

Je travaille sur un système de template. J'imagine qu'en tant qu'utilisateur régulier, vous pouvez créer un fichier. json, et sur la base de ce fichier, le système générera automatiquement du code HTML. Je suis assez perdu avec la façon de l’aborder. Peut-être que je pourrais créer une boucle récursive qui parcourt tous les objets puis ... (enfin je suis perdu).

Voici un exemple d’apparence JSON: http://Pastebin.com/cJ376fiF .

A quoi devrait ressembler le code HTML généré: http://Pastebin.com/e4EytHm1 .

javascripthtmljsontemplates
20
Mikkel

- http://www.json2html.com/

"json2html est un plug-in jQuery open source qui repose sur les transformations JSON pour convertir les objets JSON en HTML."

12
Bernicc

probablement un peu tard, j'allais faire quelque chose de similaire et je suis tombé sur ce fil, mais avec du code, la fonction de rappel est appelée depuis un objet XHR qui obtient des données du fichier actuellement statique "response.json".

function callback(req)
{
    var response = eval("("+req.responseText+")");
    response = response.response;

    createElementsFromJSON(response, document.body);
}

function createElementsFromJSON(json, parent)
{
    for(var i in json)
    {
        var object = json[i];

        var obj = document.createElement(object.element);

        for(var tag in object)
            if (tag!="children"&&tag!="element")
                obj.setAttribute(tag, object[tag]);

        parent.appendChild(obj);

        if (typeof(object.children)=="object")
            createElementsFromJSON(object.children, obj);
    }
}

JSON:

{
    "response":
    [
        {
            "element":"div",
            "id":"james",
            "children":
            [
                {
                    "element":"h1",
                    "id":"bob",
                    "innerHTML":"bobs content",
                },
                {
                    "element":"h2",
                    "id":"rob",
                    "innerHTML":"robs content",
                },
                {
                    "element":"p",
                    "innerHTML":"some random text",
                },
            ],
        },
        {
            "element":"div",
            "id":"alex",
            "innerHTML":"this is a test message in a div box",
        },
    ]
}
5
topherg

J'ai tenté modestement, pour mon propre projet, de générer dynamiquement du contenu HTML via JSON. Vous pouvez essayer le violon ici. Vous pouvez le bifurquer car le format JSON est différent.

Exemple de format JSON ressemblerait à ce qui suit.

var innerhtml = {
  type: 'b',
  content: ['This is BOLD text.', {
    type: 'i',
    content: ' Italics came from Italy? Its 35px and bold too.',
    style: 'font-size:35px;'
  }]
};

var htmlArr = {
  type: 'div',
  content: {
    type: 'p',
    content: ['Simple text with no formatting.', innerhtml, {type : 'img', src : '//www.gravatar.com/avatar/476914f28548ce41b3b7b2c5987720a9/?default=&s=64'}]
  }

};
1
Krishnakumar_Muraleedharan

jQote2 est un excellent plugin de gabarit javascript, qui devrait au moins être une bonne référence. Il analyse JSON dans les modèles HTML de manière très pratique. http://aefxx.com/jquery-plugins/jqote2/

1
Marcus

@topherg 

  • Il est plus rapide de lier obj à parent plus tôt, directement après createElement.

  • Quand vous venez à object.children, vous devriez vérifier:

    if(object.children.constructor===Array){
  for(var i=0;i<object.children.length;i++)
     createElementsFromJSON(object.children[i],obj);
}else{
   createElementsFromJSON(object.children,obj);
}

    Sinon, aucun tableau ne sera analysé. 

  • SetAttribute est lent mais vous en avez parfois besoin pour (nom, élément *, données - *, rel, objet, paramètre, boucle, date/heure, style [si vous ne souhaitez pas analyser un objet supplémentaire], colspan, ...) . L'attribut de jeu direct (element.style.width = "100px";) est 88 fois plus rapide ( jsPerf ).

Créer UN élément DOM est plus rapide que innerHTML. Construire un arbre DOM directement prend deux fois plus de temps dans innerHTML. Même innerHTML est très rapide, ce type d'analyse DOM est également rapide.

0
B.F.