¿Cómo imprimir una string JSON en JavaScript?

Dado un objeto JavaScript y la tarea es imprimir el objeto JSON en un formato bonito (fácil de leer) usando JavaScript. Use el elemento <pre> para mostrar el objeto en un formato bonito.

Acercarse:

Declare un objeto JSON y guárdelo en una variable.
Utilice el método JSON.stringify(obj) para convertir objetos de JavaScript en strings y mostrarlos.
Utilice el método JSON.stringify(obj, replacer, space) para convertir objetos de JavaScript en strings en formato bonito. En este ejemplo, usamos el tamaño de espacio cuatro. Muestra el objeto en formato alineado.

Ejemplo 1: este ejemplo utiliza el método JSON.stringify() para imprimir el elemento del objeto dentro de la etiqueta <pre>.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to pretty print JSON
        string in JavaScript ?
    </title>
</head>
  
<body>
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1>
      
    <p id="GFG_UP" style=
        "font-size: 15px; font-weight: bold;">
    </p>
      
    <button onclick="gfg_Run();">
        click here
    </button>
      
    <pre id="GFG_DOWN" style=
        "color:green; font-size: 20px; font-weight: bold;">
    </pre>
      
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        var obj = {
            "prop_1": {
                "prop_11": "val_11",
                "prop_12": "val_12"
            },
            "prop_2": "val_2",
            "prop_3": "val_3"
        };
      
        el_up.innerHTML = JSON.stringify(obj);
  
        function gfg_Run() {
            el_down.innerHTML = JSON.stringify(obj, undefined, 4);
        }
    </script>
</body>
  
</html>

Producción:

Antes de hacer clic en el botón:
Después de hacer clic en el botón:

Ejemplo 2: Este ejemplo es un poco similar al anterior pero especifica las propiedades para imprimir el objeto de objeto. También aprovecha el método JSON.stringify() para imprimir un objeto dentro del elemento <pre>.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to pretty print JSON
        string in JavaScript ?
    </title>
</head>
  
<body>
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1>
      
    <p id="GFG_UP" style=
        "font-size: 15px; font-weight: bold;">
    </p>
      
    <button onclick="gfg_Run();">
        click here
    </button>
      
    <pre id="GFG_DOWN" style=
        "color:green; font-size: 20px; font-weight: bold;">
    </pre>
      
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
      
        var obj = {
            "prop_1": {
                "prop_11": "val_11",
                "prop_12": "val_12"
            },
            "prop_2": "val_2",
            "prop_3": "val_3"
        };
          
        el_up.innerHTML = JSON.stringify(obj);
  
        function gfg_Run() {
            el_down.innerHTML = JSON.stringify(obj,
                                ['prop_2', 'prop_3'], 4);
        }
    </script>
</body>
  
</html>

Producción:

Antes de hacer clic en el botón:
Después de hacer clic en el botón:

JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta