Cómo imprimir una cadena JSON embellecida con JavaScript

El método JSON stringify devuelve una cadena JSON de una matriz o un objeto. Este método espera 3 parámetros:

  • valor (objeto o matriz)
  • Reemplazo o Filtro (función para procesar o matriz de cadenas con los índices para mostrar)
  • espacio (imprima su json con espacios o saltos de línea)
var value = {
  hello:"Hey!",
  bye: "Ok bye!",
  id:123
}; // Array u objeto

// Una función que altera el comportamiento del proceso de encadenamiento, 
// o una matriz de objetos Strings y Numbers que sirven como lista blanca para seleccionar las propiedades del objeto de valor que se incluirán en la cadena JSON. 
// Si este valor es nulo o no está definido, todas las propiedades del objeto se incluyen en la cadena JSON resultante.
var replacer = ["hello"];

// o una funcion
// En este caso, solo la propiedad id del objeto se codificará en cadena, ya que es la única propiedad con un valor numérico.
function replacer(key, value) {
  if (typeof value === "number") {
    return undefined;
  }
  return value;
}

// un valor numérico que se identifica como espacios
// o usa separadores personalizados (saltos de línea \t or \n ) 
var space = 5;


JSON.stringify(value, replacer, space);

Puede imprimir un objeto json utilizando el tercer parámetro. Muy útil si trabaja con cordova o node.js para crear archivos .json organizados.

El siguiente ejemplo muestra cómo imprimir bastante (json con sangría) un objeto json con JSON.stringify y dar un estilo de resaltado con css:

La función syntaxHighlight función agregará a cada propiedad un intervalo con una clase personalizada para dar un efecto de resaltado en el elemento div. Incluso puede dar un estilo de resaltado en la consola de Chrome usando css, lea más sobre cómo funciona css en la consola aquí . 

La siguiente función manejará la cadena json bastante impresa generada por la JSON.stringifyfunción y la imprimirá con colores en la consola.

function PrettyPrintJsonConsole(json) {
    if (typeof json != 'string') {
        json = JSON.stringify(json, undefined, '\t');
    }

    var 
        arr = [],
        _string = 'color:green',
        _number = 'color:darkorange',
        _boolean = 'color:blue',
        _null = 'color:magenta',
        _key = 'color:red';

    json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var style = _number;
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                style = _key;
            } else {
                style = _string;
            }
        } else if (/true|false/.test(match)) {
            style = _boolean;
        } else if (/null/.test(match)) {
            style = _null;
        }
        arr.push(style);
        arr.push('');
        return '%c' + match + '%c';
    });

    arr.unshift(json);

    console.log.apply(console, arr);
}

var myCustomObject = {
  numbers:[1,3,4,5],
  hello:"Hey there!",
  otherThing:true,
  anotherThing:4
};

PrettyPrintJsonConsole(JSON.stringify(myCustomObject,null,4));

El uso de la función anterior debería generar algo como esto en la consola de Chrome:

Chrome pretty-print JSON

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable