Автоматически создавать HTML из JSON

Я работаю над системой шаблонов. Я полагаю, что в качестве обычного пользователя вы можете создать a. json, и на основе этого файла система автоматически генерирует html. Я довольно потерял, как подойти к нему. Возможно, я мог бы создать рекурсивный цикл, который проходит через все объекты, а затем.... (ну, я потерялся).

Пример того, как может выглядеть JSON: http://pastebin.com/cJ376fiF.

Как должен выглядеть сгенерированный HTML: http://pastebin.com/e4EytHm1.

Ответы

Ответ 1

http://www.json2html.com/

"json2html - это плагин jQuery с открытым исходным кодом, который использует преобразования JSON для преобразования объектов JSON в HTML.

Ответ 2

возможно, немного поздно, я собирался сделать что-то подобное и наткнулся на этот поток, но имел некоторый код, вызывающая функция вызывается из объекта XHR, который получает данные из текущего статического файла "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",
        },
    ]
}

Ответ 3

jQote2 - отличный плагин для шаблонов javascript, который должен быть по крайней мере хорошим эталоном. Он разбирает JSON в HTML-шаблонах очень удобным способом. http://aefxx.com/jquery-plugins/jqote2/

Ответ 4

Я сделал скромную попытку для собственного проекта динамически генерировать html-контент через JSON. Здесь вы можете попробовать 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'}]
  }

};

Ответ 5

@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 работает медленно, но иногда вам это нужно (имя, элемент *, данные - *, rel, objekt, param, loop, datetime, style [если вы не хотите анализировать дополнительный объект], colspan,...). Direct Set Attribute (element.style.width = "100px";) в 88 раз быстрее (jsPerf).

Чтобы создать элемент ONE DOM быстрее, чем innerHTML. Построение дерева DOM напрямую, занимает двойное время innerHTML. Даже innerHTML очень быстро, что разбор DOM также очень быстрый.