JSON.stringify salida a div en forma de impresión bonita

163

Soy JSON.stringifyun objeto json por

result = JSON.stringify(message, my_json, 2)

Se 2supone que el argumento anterior imprime bastante el resultado. Hace esto si hago algo como alert(result). Sin embargo, quiero enviar esto al usuario agregándolo dentro de un div. Cuando hago esto, aparece una sola línea. (¿No creo que esté funcionando porque los descansos y los espacios no se interpretan como html?)

{ "data": { "x": "1", "y": "1", "url": "http://url.com" }, "event": "start", "show": 1, "id": 50 }

¿Hay alguna manera de generar el resultado de JSON.stringifyun div de una manera bonita de impresión?

javascript html json pretty-print stringify Alexis
fuente
¿Usar un pre elemento? ¿Usar una biblioteca prettify?
epascarello
Usando PHP, esto fue útil para mí: stackoverflow.com/a/13638998/470749
Ryan

Respuestas:

427

Por favor use una <pre> etiqueta

demostración: http://jsfiddle.net/K83cK/ 

var data = {
  "data": {
    "x": "1",
    "y": "1",
    "url": "http://url.com"
  },
  "event": "start",
  "show": 1,
  "id": 50
}


document.getElementById("json").textContent = JSON.stringify(data, undefined, 2);
<pre id="json"></pre>
Expandir fragmento

Diodo
fuente
24
prele dice al motor del navegador que el contenido dentro está preformateado y se puede mostrar sin ninguna modificación. Por lo tanto, el navegador no eliminará espacios en blanco, nuevas líneas, etc. codees para hacerlo más semántico y denota que el contenido dentro es un fragmento de código. No tiene nada que ver con el formateo. Se recomienda usar de esta manera,<pre><code> /* Your code snippet here. */ </code></pre>
Diode
3
Para evitar largas colas que salgan del contenedor de la etiqueta previa, se deben agregar las siguientes reglas CSS a la etiqueta previa: stackoverflow.com/a/248013/883083
IHeartAndroid
Muchas gracias.
CENT1PEDE
Muy simple y eso es todo lo que necesito. Gracias.
Nguyen Tran
1
@ user3692823: Gracias. Lo he actualizado Esta respuesta fue escrita en 2013 y innerHTMLera más común entonces. textContentse convirtió en una propiedad estándar más tarde.
Diodo
28

Asegúrese de que la salida JSON esté en una <pre>etiqueta.

Adán
fuente
7

La revelación completa yo soy el autor de este paquete, pero otra forma de salida de JSON o JavaScript objetos de una manera completa legible con ser capaces de salto partes, contraerlos, etc., es nodedump, https://github.com/ragamufin/nodedump

ragamufin
fuente
6

Mi propuesta se basa en:

  • reemplace cada '\ n' (nueva línea) con un <br>
  • reemplace cada espacio con & nbsp;

var x = { "data": { "x": "1", "y": "1", "url": "http://url.com" }, "event": "start", "show": 1, "id": 50 };


document.querySelector('#newquote').innerHTML = JSON.stringify(x, null, 6)
     .replace(/\n( *)/g, function (match, p1) {
         return '<br>' + '&nbsp;'.repeat(p1.length);
     });
<div id="newquote"></div>
Expandir fragmento

gaetanoM
fuente
3

Si su <pre>etiqueta muestra una sola línea de JSON porque así es como se proporciona la cadena (a través de una API o alguna función / página fuera de su control), puede formatearla de esta manera:

HTML:

<pre id="json">{"some":"JSON string"}</pre>

JavaScript:

    (function() {
        var element = document.getElementById("json");
        var obj = JSON.parse(element.innerText);
        element.innerHTML = JSON.stringify(obj, undefined, 2);
    })();

o jQuery:

    $(formatJson);

    function formatJson() {
        var element = $("#json");
        var obj = JSON.parse(element.text());
        element.html(JSON.stringify(obj, undefined, 2));
    }
thinkOfaNumber
fuente
2

Considere las devoluciones de su API REST: 

{"Intent":{"Command":"search","SubIntent":null}}

Luego puede hacer lo siguiente para imprimirlo en un formato agradable:

<pre id="ciResponseText">Output will de displayed here.</pre>   

var ciResponseText = document.getElementById('ciResponseText');
var obj = JSON.parse(http.response);
ciResponseText.innerHTML = JSON.stringify(obj, undefined, 2);
Siddarth Kanted
fuente
1

use estilo white-space: prela <pre>etiqueta también modifica el formato de texto que puede ser indeseable.

usuario7986267
fuente
0

imprimir el estado de un componente con JSX

render() {
  return (
    <div>
      <h1>Adopt Me!</h1>
      <pre>
        <code>{JSON.stringify(this.state, null, 4)}</code>
      </pre>
    </div>
  );
}

stringify

Bar Horing
fuente
0

para aquellos que quieran mostrar json colapsable pueden usar renderjson

Aquí está el ejemplo al incrustar el render js javascript en html

<!DOCTYPE html>
<html>

<head>
    <script type="application/javascript">
        // Copyright © 2013-2014 David Caldwell <[email protected]>
        //
        // Permission to use, copy, modify, and/or distribute this software for any
        // purpose with or without fee is hereby granted, provided that the above
        // copyright notice and this permission notice appear in all copies.
        //
        // THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
        // WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
        // MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY
        // SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
        // WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION
        // OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN
        // CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

        // Usage
        // -----
        // The module exports one entry point, the `renderjson()` function. It takes in
        // the JSON you want to render as a single argument and returns an HTML
        // element.
        //
        // Options
        // -------
        // renderjson.set_icons("+", "-")
        //   This Allows you to override the disclosure icons.
        //
        // renderjson.set_show_to_level(level)
        //   Pass the number of levels to expand when rendering. The default is 0, which
        //   starts with everything collapsed. As a special case, if level is the string
        //   "all" then it will start with everything expanded.
        //
        // renderjson.set_max_string_length(length)
        //   Strings will be truncated and made expandable if they are longer than
        //   `length`. As a special case, if `length` is the string "none" then
        //   there will be no truncation. The default is "none".
        //
        // renderjson.set_sort_objects(sort_bool)
        //   Sort objects by key (default: false)
        //
        // Theming
        // -------
        // The HTML output uses a number of classes so that you can theme it the way
        // you'd like:
        //     .disclosure    ("⊕", "⊖")
        //     .syntax        (",", ":", "{", "}", "[", "]")
        //     .string        (includes quotes)
        //     .number
        //     .boolean
        //     .key           (object key)
        //     .keyword       ("null", "undefined")
        //     .object.syntax ("{", "}")
        //     .array.syntax  ("[", "]")

        var module;
        (module || {}).exports = renderjson = (function () {
            var themetext = function (/* [class, text]+ */) {
                var spans = [];
                while (arguments.length)
                    spans.push(append(span(Array.prototype.shift.call(arguments)),
                        text(Array.prototype.shift.call(arguments))));
                return spans;
            };
            var append = function (/* el, ... */) {
                var el = Array.prototype.shift.call(arguments);
                for (var a = 0; a < arguments.length; a++)
                    if (arguments[a].constructor == Array)
                        append.apply(this, [el].concat(arguments[a]));
                    else
                        el.appendChild(arguments[a]);
                return el;
            };
            var prepend = function (el, child) {
                el.insertBefore(child, el.firstChild);
                return el;
            }
            var isempty = function (obj) {
                for (var k in obj) if (obj.hasOwnProperty(k)) return false;
                return true;
            }
            var text = function (txt) { return document.createTextNode(txt) };
            var div = function () { return document.createElement("div") };
            var span = function (classname) {
                var s = document.createElement("span");
                if (classname) s.className = classname;
                return s;
            };
            var A = function A(txt, classname, callback) {
                var a = document.createElement("a");
                if (classname) a.className = classname;
                a.appendChild(text(txt));
                a.href = '#';
                a.onclick = function () { callback(); return false; };
                return a;
            };

            function _renderjson(json, indent, dont_indent, show_level, max_string, sort_objects) {
                var my_indent = dont_indent ? "" : indent;

                var disclosure = function (open, placeholder, close, type, builder) {
                    var content;
                    var empty = span(type);
                    var show = function () {
                        if (!content) append(empty.parentNode,
                            content = prepend(builder(),
                                A(renderjson.hide, "disclosure",
                                    function () {
                                        content.style.display = "none";
                                        empty.style.display = "inline";
                                    })));
                        content.style.display = "inline";
                        empty.style.display = "none";
                    };
                    append(empty,
                        A(renderjson.show, "disclosure", show),
                        themetext(type + " syntax", open),
                        A(placeholder, null, show),
                        themetext(type + " syntax", close));

                    var el = append(span(), text(my_indent.slice(0, -1)), empty);
                    if (show_level > 0)
                        show();
                    return el;
                };

                if (json === null) return themetext(null, my_indent, "keyword", "null");
                if (json === void 0) return themetext(null, my_indent, "keyword", "undefined");

                if (typeof (json) == "string" && json.length > max_string)
                    return disclosure('"', json.substr(0, max_string) + " ...", '"', "string", function () {
                        return append(span("string"), themetext(null, my_indent, "string", JSON.stringify(json)));
                    });

                if (typeof (json) != "object") // Strings, numbers and bools
                    return themetext(null, my_indent, typeof (json), JSON.stringify(json));

                if (json.constructor == Array) {
                    if (json.length == 0) return themetext(null, my_indent, "array syntax", "[]");

                    return disclosure("[", " ... ", "]", "array", function () {
                        var as = append(span("array"), themetext("array syntax", "[", null, "\n"));
                        for (var i = 0; i < json.length; i++)
                            append(as,
                                _renderjson(json[i], indent + "    ", false, show_level - 1, max_string, sort_objects),
                                i != json.length - 1 ? themetext("syntax", ",") : [],
                                text("\n"));
                        append(as, themetext(null, indent, "array syntax", "]"));
                        return as;
                    });
                }

                // object
                if (isempty(json))
                    return themetext(null, my_indent, "object syntax", "{}");

                return disclosure("{", "...", "}", "object", function () {
                    var os = append(span("object"), themetext("object syntax", "{", null, "\n"));
                    for (var k in json) var last = k;
                    var keys = Object.keys(json);
                    if (sort_objects)
                        keys = keys.sort();
                    for (var i in keys) {
                        var k = keys[i];
                        append(os, themetext(null, indent + "    ", "key", '"' + k + '"', "object syntax", ': '),
                            _renderjson(json[k], indent + "    ", true, show_level - 1, max_string, sort_objects),
                            k != last ? themetext("syntax", ",") : [],
                            text("\n"));
                    }
                    append(os, themetext(null, indent, "object syntax", "}"));
                    return os;
                });
            }

            var renderjson = function renderjson(json) {
                var pre = append(document.createElement("pre"), _renderjson(json, "", false, renderjson.show_to_level, renderjson.max_string_length, renderjson.sort_objects));
                pre.className = "renderjson";
                return pre;
            }
            renderjson.set_icons = function (show, hide) {
                renderjson.show = show;
                renderjson.hide = hide;
                return renderjson;
            };
            renderjson.set_show_to_level = function (level) {
                renderjson.show_to_level = typeof level == "string" &&
                    level.toLowerCase() === "all" ? Number.MAX_VALUE
                    : level;
                return renderjson;
            };
            renderjson.set_max_string_length = function (length) {
                renderjson.max_string_length = typeof length == "string" &&
                    length.toLowerCase() === "none" ? Number.MAX_VALUE
                    : length;
                return renderjson;
            };
            renderjson.set_sort_objects = function (sort_bool) {
                renderjson.sort_objects = sort_bool;
                return renderjson;
            };
            // Backwards compatiblity. Use set_show_to_level() for new code.
            renderjson.set_show_by_default = function (show) {
                renderjson.show_to_level = show ? Number.MAX_VALUE : 0;
                return renderjson;
            };
            renderjson.set_icons('⊕', '⊖');
            renderjson.set_show_by_default(false);
            renderjson.set_sort_objects(false);
            renderjson.set_max_string_length("none");
            return renderjson;
        })();
    </script>

</head>


<body>
    <div id="dest"></div>
</body>
<script type="application/javascript">
    document.getElementById("dest").appendChild(
        renderjson.set_show_by_default(true)
            //.set_show_to_level(2)
            //.set_sort_objects(true)
            //.set_icons('+', '-')
            .set_max_string_length(100)
            ([
                {
                    "glossary": {
                        "title": "example glossary",
                        "GlossDiv": {
                            "title": "S",
                            "GlossList": {
                                "GlossEntry": {
                                    "ID": "SGML",
                                    "SortAs": "SGML",
                                    "GlossTerm": "Standard Generalized Markup Language",
                                    "Acronym": "SGML",
                                    "Abbrev": "ISO 8879:1986",
                                    "GlossDef": {
                                        "para": "A meta-markup language, used to create markup languages such as DocBook.",
                                        "GlossSeeAlso": ["GML", "XML"]
                                    },
                                    "GlossSee": "markup"
                                }
                            }
                        }
                    }
                },
                {
                    "menu": {
                        "id": "file",
                        "value": "File",
                        "popup": {
                            "menuitem": [
                                { "value": "New", "onclick": "CreateNewDoc()" },
                                { "value": "Open", "onclick": "OpenDoc()" },
                                { "value": "Close", "onclick": "CloseDoc()" }
                            ]
                        }
                    }
                },

                {
                    "widget": {
                        "debug": "on",
                        "window": {
                            "title": "Sample Konfabulator Widget",
                            "name": "main_window",
                            "width": 500,
                            "height": 500
                        },
                        "image": {
                            "src": "Images/Sun.png",
                            "name": "sun1",
                            "hOffset": 250,
                            "vOffset": 250,
                            "alignment": "center"
                        },
                        "text": {
                            "data": "Click Here",
                            "size": 36,
                            "style": "bold",
                            "name": "text1",
                            "hOffset": 250,
                            "vOffset": 100,
                            "alignment": "center",
                            "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;"
                        }
                    }
                },

                {
                    "web-app": {
                        "servlet": [
                            {
                                "servlet-name": "cofaxCDS",
                                "servlet-class": "org.cofax.cds.CDSServlet",
                                "init-param": {
                                    "configGlossary:installationAt": "Philadelphia, PA",
                                    "configGlossary:adminEmail": "[email protected]",
                                    "configGlossary:poweredBy": "Cofax",
                                    "configGlossary:poweredByIcon": "/images/cofax.gif",
                                    "configGlossary:staticPath": "/content/static",
                                    "templateProcessorClass": "org.cofax.WysiwygTemplate",
                                    "templateLoaderClass": "org.cofax.FilesTemplateLoader",
                                    "templatePath": "templates",
                                    "templateOverridePath": "",
                                    "defaultListTemplate": "listTemplate.htm",
                                    "defaultFileTemplate": "articleTemplate.htm",
                                    "useJSP": false,
                                    "jspListTemplate": "listTemplate.jsp",
                                    "jspFileTemplate": "articleTemplate.jsp",
                                    "cachePackageTagsTrack": 200,
                                    "cachePackageTagsStore": 200,
                                    "cachePackageTagsRefresh": 60,
                                    "cacheTemplatesTrack": 100,
                                    "cacheTemplatesStore": 50,
                                    "cacheTemplatesRefresh": 15,
                                    "cachePagesTrack": 200,
                                    "cachePagesStore": 100,
                                    "cachePagesRefresh": 10,
                                    "cachePagesDirtyRead": 10,
                                    "searchEngineListTemplate": "forSearchEnginesList.htm",
                                    "searchEngineFileTemplate": "forSearchEngines.htm",
                                    "searchEngineRobotsDb": "WEB-INF/robots.db",
                                    "useDataStore": true,
                                    "dataStoreClass": "org.cofax.SqlDataStore",
                                    "redirectionClass": "org.cofax.SqlRedirection",
                                    "dataStoreName": "cofax",
                                    "dataStoreDriver": "com.microsoft.jdbc.sqlserver.SQLServerDriver",
                                    "dataStoreUrl": "jdbc:microsoft:sqlserver://LOCALHOST:1433;DatabaseName=goon",
                                    "dataStoreUser": "sa",
                                    "dataStorePassword": "dataStoreTestQuery",
                                    "dataStoreTestQuery": "SET NOCOUNT ON;select test='test';",
                                    "dataStoreLogFile": "/usr/local/tomcat/logs/datastore.log",
                                    "dataStoreInitConns": 10,
                                    "dataStoreMaxConns": 100,
                                    "dataStoreConnUsageLimit": 100,
                                    "dataStoreLogLevel": "debug",
                                    "maxUrlLength": 500
                                }
                            },
                            {
                                "servlet-name": "cofaxEmail",
                                "servlet-class": "org.cofax.cds.EmailServlet",
                                "init-param": {
                                    "mailHost": "mail1",
                                    "mailHostOverride": "mail2"
                                }
                            },
                            {
                                "servlet-name": "cofaxAdmin",
                                "servlet-class": "org.cofax.cds.AdminServlet"
                            },

                            {
                                "servlet-name": "fileServlet",
                                "servlet-class": "org.cofax.cds.FileServlet"
                            },
                            {
                                "servlet-name": "cofaxTools",
                                "servlet-class": "org.cofax.cms.CofaxToolsServlet",
                                "init-param": {
                                    "templatePath": "toolstemplates/",
                                    "log": 1,
                                    "logLocation": "/usr/local/tomcat/logs/CofaxTools.log",
                                    "logMaxSize": "",
                                    "dataLog": 1,
                                    "dataLogLocation": "/usr/local/tomcat/logs/dataLog.log",
                                    "dataLogMaxSize": "",
                                    "removePageCache": "/content/admin/remove?cache=pages&id=",
                                    "removeTemplateCache": "/content/admin/remove?cache=templates&id=",
                                    "fileTransferFolder": "/usr/local/tomcat/webapps/content/fileTransferFolder",
                                    "lookInContext": 1,
                                    "adminGroupID": 4,
                                    "betaServer": true
                                }
                            }],
                        "servlet-mapping": {
                            "cofaxCDS": "/",
                            "cofaxEmail": "/cofaxutil/aemail/*",
                            "cofaxAdmin": "/admin/*",
                            "fileServlet": "/static/*",
                            "cofaxTools": "/tools/*"
                        },

                        "taglib": {
                            "taglib-uri": "cofax.tld",
                            "taglib-location": "/WEB-INF/tlds/cofax.tld"
                        }
                    }
                },

                {
                    "menu": {
                        "header": "SVG Viewer",
                        "items": [
                            { "id": "Open" },
                            { "id": "OpenNew", "label": "Open New" },
                            null,
                            { "id": "ZoomIn", "label": "Zoom In" },
                            { "id": "ZoomOut", "label": "Zoom Out" },
                            { "id": "OriginalView", "label": "Original View" },
                            null,
                            { "id": "Quality" },
                            { "id": "Pause" },
                            { "id": "Mute" },
                            null,
                            { "id": "Find", "label": "Find..." },
                            { "id": "FindAgain", "label": "Find Again" },
                            { "id": "Copy" },
                            { "id": "CopyAgain", "label": "Copy Again" },
                            { "id": "CopySVG", "label": "Copy SVG" },
                            { "id": "ViewSVG", "label": "View SVG" },
                            { "id": "ViewSource", "label": "View Source" },
                            { "id": "SaveAs", "label": "Save As" },
                            null,
                            { "id": "Help" },
                            { "id": "About", "label": "About Adobe CVG Viewer..." }
                        ]
                    }
                },
                {
                    "empty": {
                        "object": {},
                        "array": []
                    }
                },
                {
                    "really_long": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere, orci quis laoreet luctus, nunc neque condimentum arcu, sed tristique sem erat non libero. Morbi et velit non justo rutrum pulvinar. Nam pellentesque laoreet lacus eget sollicitudin. Quisque maximus mattis nisl, eget tempor nisi pulvinar et. Nullam accumsan sapien sapien, non gravida turpis consectetur non. Etiam in vestibulum neque. Donec porta dui sit amet turpis efficitur laoreet. Duis eu convallis ex, vel volutpat lacus. Donec sit amet nunc a orci fermentum luctus."
                }
            ]));
</script>

</html>
Bhanu Sharma
fuente