Estoy trabajando en un sistema de plantillas. Me imagino que como un usuario normal puede crear una. archivo json, y en base a este archivo, el sistema generará automáticamente el código html.
Estoy bastante perdido con cómo abordarla. Tal vez yo podría crear un bucle recursivo que se ejecuta a través de todos los objetos y, a continuación,…. (bueno, yo estoy perdido).

Un ejemplo de cómo el JSON que podría ver: http://pastebin.com/cJ376fiF.

Cómo el HTML generado debe verse como: http://pastebin.com/e4EytHm1.

  • Me como lo haría un usuario en lugar de escribir código HTML de escribir json que describe cómo una página web debe buscar y lo que se tiene. También, ¿has pensado en cómo va a manejar el estilo?
  • Hay una razón que usted no puede usar jQuery y su plantilla plugin?
  • ¿De verdad has ahorrado mucho entre JSON y HTML? El label y fieldset parecen implicar que su usuario regular tendría que tener algún conocimiento de los elementos HTML.
  • Estoy en parte de acuerdo en lo que ustedes están diciendo, pero es este caso, json es la mejor solución para el usuario (al menos eso creo). 😉
  • No he oído hablar de él, voy a echar un vistazo ahora mismo 😉
  • Suena como que usted está tratando de reinventar la HAML
  • No entiendo por qué se está generando un formato que es diferente a lo que usted desea. JSON es buena para enviar datos a varios (generalmente hetergeneous) clientes. Pero si el cliente quiere HTML, sólo tienes que enviar HTML. También puede dar formato a los datos como XML y, a continuación, utilizar XSLT para convertirlo a HTML (en el servidor de preferencia, pero puede ser en el cliente) o cualquier otro marcado para los diferentes clientes.
  • Buen punto. Estoy convencido , voy a utilizar XML o simplemente HTML. Gracias a todos 😉
  • si ya quieres utilizar XML, para XHR usted podría utilizar .responseXML, pero con html básico sería más fácil. Si usted está planeando sobre el uso de secuencias de comandos, entonces usted puede utilizar un corrector para encontrar los elementos de script, a continuación, volver a crear en el encabezado para ejecutarlas.

InformationsquelleAutor Mikkel | 2011-04-19

5 Comentarios

  1. 13

    http://www.json2html.com/

    «json2html es una fuente abierta de jQuery plug-in que se basa en JSON se transforma para convertir objetos JSON para HTML.»

    • Esto es simplemente increíble.
    • Se le preguntó acerca de Javascript no jQuery…
  2. 5

    probablemente un poco tarde, yo iba a hacer algo similar, y me encontré con este hilo, pero tiene algo de código, la función de devolución de llamada de un objeto XHR que obtiene los datos de la actualidad de archivo estático «de la respuesta.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",
            },
        ]
    }
    • Simple y pequeña, muy agradable. Gracias!
  3. 1

    jQote2 es una excelente javascript plantillas plugin, que debe ser al menos un buen punto de referencia. Analiza JSON en plantillas HTML de una manera muy práctica.
    http://aefxx.com/jquery-plugins/jqote2/

    • parece lógico, creo que solo quiere construir uno mismo
    • Esa es la imagen que tengo demasiado. Todavía me gustaría utilizar algunas de las soluciones existentes antes de ver la buena/mala partes. Y pasar por el código de algunas de las mejores soluciones, especialmente si es un poco perdidos sobre cómo implementar sistema similar.
    • Lo hizo justo aquí, similar a una pregunta en stackOverFlow. Es javascript puro, tal como solicitó.
  4. 1

    He hecho un humilde intento por mi propio proyecto para generar dinámicamente el contenido html a través de JSON. Usted puede probar la el violín aquí. Usted es bienvenido a la bifurcación de la misma ya que el formato JSON es diferente.

    Ejemplo de formato JSON tendría un aspecto como el siguiente.

    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. 0

    @topherg

    • Es más rápido para enlazar obj a los padres de antes – directo después de createElement.

    • Cuando vienes a objeto.los niños usted debe comprobar:

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

      De lo contrario, no de la matriz se analiza.

    • SetAttribute es lenta, pero a veces se necesita para (nombre,elemento de*datos*,rel,objekt,param,bucle,datetime,estilo[si usted no desea analizar un objeto adicional],colspan,…). Directa de Conjunto de atributos de elemento.de estilo.width=»100px»;) es de 88 veces más rápido (jsPerf).

    Para crear UN elemento de DOM es más rápido que innerHTML. La construcción de un árbol DOM directamente, toma el doble de tiempo de innerHTML. Incluso innerHTML es muy rápido de que tipo de DOM analizar es todavía demasiado rápido.

Dejar respuesta

Please enter your comment!
Please enter your name here