web-dev-qa-db-ja.com

JSONからHTMLを自動生成

私はテンプレートシステムに取り組んでいます。通常のユーザーとして作成できると思います。 jsonファイル、およびそのファイルに基づいて、システムは自動的にhtmlを生成します。私はそれにどのように取り組むかでかなり迷っています。多分私はすべてのオブジェクトを実行する再帰ループを作成することができます...そして（私は迷っています）。

JSONの外観の例： http://Pastebin.com/cJ376fiF 。

生成されたHTMLは次のようになります： http://Pastebin.com/e4EytHm1 。

javascripthtmljsontemplates
21
Mikkel

http://www.json2html.com/

「json2htmlは、JSON変換を使用してJSONオブジェクトをHTMLに変換するオープンソースのjQueryプラグインです。」

13
Bernicc

おそらく少し遅れて、私は同じようなことをするつもりで、このスレッドに出くわしましたが、コードがいくつかあり、コールバック関数は、現在静的なファイル "response.json"からデータを取得するXHRオブジェクトから呼び出されます

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

私は自分のプロジェクトでJSONを介してHTMLコンテンツを動的に生成するために控えめな試みをしました。ここで fiddle を試すことができます。 JSON形式が異なるため、フォークしてもかまいません。

サンプルのJSON形式は次のようになります。

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は、優れたjavascriptテンプレートプラグインであり、少なくとも優れたベンチマークになるはずです。それは非常に便利な方法でJSONをHTMLテンプレートに解析します。 http://aefxx.com/jquery-plugins/jqote2/

1
Marcus

@topherg

  • 以前にobjを親にバインドする方が高速です-createElementの直後。

  • Object.childrenに来たら、次のことを確認する必要があります。

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

    それ以外の場合、配列は解析されません。

  • SetAttributeは遅いですが、（name、item *、data-*、rel、objekt、param、loop、datetime、style [追加のオブジェクトを解析したくない場合]、colspan、...） 。直接設定属性（element.style.width = "100px";）は88倍高速です（ jsPerf ）。

1つのDOM要素を作成する方がinnerHTMLよりも高速です。 DOMツリーを直接構築すると、innerHTMLの2倍の時間がかかります。 innerHTMLでさえ非常に高速なので、この種のDOM解析も高速です。

0
B.F.