Автоматически генерировать HTML из JSON

Question

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

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

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

Answer 1

http://www.json2html.com/

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

Answer 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",
        },
    ]
}

Answer 3

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

};

Answer 4

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

Answer 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 [если вы не хотите анализировать дополнительныйобъект], Объединение столбцов, ...).Атрибут Direct Set (element.style.width = "100px";) работает в 88 раз быстрее ( jsPerf ).

Создание ОДНОГО элемента DOM происходит быстрее, чем innerHTML.Построение дерева DOM напрямую, занимает в два раза больше времени по innerHTML.Даже innerHTML очень быстр, и DOM-анализ по-прежнему быстр.