ejemplos - mostrar datos json javascript

Cómo mostrar datos JSON en bruto en una página HTML

Question

Posible duplicado:
JSON impresión bonita utilizando JavaScript

Me gustaría mostrar mis datos JSON sin procesar en una página HTML tal como lo hace JSONview. Por ejemplo, mis datos de json en bruto son:

  {
   "hey":"guy",
   "anumber":243,
   "anobject":{
      "whoa":"nuts",
      "anarray":[
         1,
         2,
         "thr<h1>ee"
      ],
      "more":"stuff"
   },
   "awesome":true,
   "bogus":false,
   "meaning":null,
   "japanese":"明日がある。",
   "link":"http://jsonview.com",
   "notLink":"http://jsonview.com is great"
}

Viene de http://jsonview.com/ , y lo que quiero lograr es como http://jsonview.com/example.json si usa Chrome y tiene instalado el complemento JSONView.

Lo he intentado pero no he podido entender cómo funciona. Me gustaría usar un script JS (CSS para resaltar) para dar formato personalizado a mis datos JSON sin procesar que se recuperan con ajax y, finalmente, colocarlos en una página HTML en cualquier posición, como en un elemento div. ¿Hay alguna biblioteca JS existente que pueda lograr esto? ¿O cómo hacerlo?

Answer 1

Creo que todo lo que necesita para mostrar los datos en una página HTML es JSON.stringify .

Por ejemplo, si su JSON se almacena así:

var jsonVar = {
        text: "example",
        number: 1
    };

Entonces solo necesitas hacer esto para convertirlo en una cadena:

var jsonStr = JSON.stringify(jsonVar);

Y luego puede insertar directamente en su HTML, por ejemplo:

document.body.innerHTML = jsonStr;

Por supuesto, probablemente querrá reemplazar el body por algún otro elemento a través de getElementById .

En cuanto a la parte de CSS de su pregunta, puede usar RegExp para manipular el objeto stringificado antes de colocarlo en el DOM. Por ejemplo, este código ( también en JSFiddle para fines de demostración ) debe tener cuidado de la sangría de llaves.

var jsonVar = {
        text: "example",
        number: 1,
        obj: {
            "more text": "another example"
        },
        obj2: {
             "yet more text": "yet another example"
        }
    }, // THE RAW OBJECT
    jsonStr = JSON.stringify(jsonVar),  // THE OBJECT STRINGIFIED
    regeStr = '''', // A EMPTY STRING TO EVENTUALLY HOLD THE FORMATTED STRINGIFIED OBJECT
    f = {
            brace: 0
        }; // AN OBJECT FOR TRACKING INCREMENTS/DECREMENTS,
           // IN PARTICULAR CURLY BRACES (OTHER PROPERTIES COULD BE ADDED)

regeStr = jsonStr.replace(/({|}[,]*|[^{}:]+:[^{}:,]*[,{]*)/g, function (m, p1) {
var rtnFn = function() {
        return ''<div style="text-indent: '' + (f[''brace''] * 20) + ''px;">'' + p1 + ''</div>'';
    },
    rtnStr = 0;
    if (p1.lastIndexOf(''{'') === (p1.length - 1)) {
        rtnStr = rtnFn();
        f[''brace''] += 1;
    } else if (p1.indexOf(''}'') === 0) {
         f[''brace''] -= 1;
        rtnStr = rtnFn();
    } else {
        rtnStr = rtnFn();
    }
    return rtnStr;
});

document.body.innerHTML += regeStr; // appends the result to the body of the HTML document

Este código simplemente busca las secciones del objeto dentro de la cadena y las separa en divs (aunque podría cambiar la parte HTML de eso). Sin embargo, cada vez que encuentra una llave, aumenta o disminuye la sangría dependiendo de si se trata de una llave de apertura o de un cierre (comportamiento similar al JSON.stringify ). Pero podría ser esto como base para diferentes tipos de formato.

Answer 2

JSON en cualquier etiqueta HTML excepto la etiqueta <script> sería un mero texto. Por lo tanto, es como si agregaras una historia a tu página HTML.

Sin embargo, sobre el formato, eso es otra cuestión. Supongo que deberías cambiar el título de tu pregunta.

Echa un vistazo a this pregunta. También vea this página.

Answer 3

Tenga en cuenta que el enlace que proporcionó no es una página HTML, sino un documento JSON. El formateo lo realiza el navegador.

Tienes que decidir si:

1. Desea mostrar el JSON sin formato (no una página HTML), como en su ejemplo
2. Mostrar una página HTML con formato JSON

Si desea 1., simplemente indique a su aplicación que represente un cuerpo de respuesta con el JSON, configure el tipo MIME (aplicación / json), etc. En este caso, el formato se encarga del navegador (y / o de los complementos del navegador)

Si es 2., es cuestión de representar una página HTML mínima simple con JSON, donde puede resaltarla de varias maneras:

• lado del servidor, dependiendo de su pila. Hay soluciones para casi todos los idiomas.
• lado del cliente con bibliotecas de resaltado de Javascript

Si da más detalles sobre su pila, es más fácil proporcionar ejemplos o recursos.

EDITAR: Para el resaltado de JS del lado del cliente, puede probar higlight.js , por ejemplo.