El formato JSON es fundamental para el intercambio de datos en aplicaciones web. JavaScript proporciona dos métodos estáticos en el objeto global JSON para trabajar con este formato: JSON.stringify() y JSON.parse(). A continuación se explica su uso y personalización.

Conversión básica entre objeto y JSON

JSON.stringify() convierte un valor JavaScript (como un objeto o array) en una cadena de texto JSON. JSON.parse() realiza la operación inversa, transformando una cadena JSON válida en un valor JavaScript.

Es importante considerar que al serializar un objeto:

• Se omiten funciones, símbolos y propiedades con valor undefined.
• Los prototipos del objeto no se incluyen en el resultado.
• El método arrrojará un error si la cadena proporcionada a JSON.parse() no es sintácticamente correcta.

const userData = {
    name: "Surpass",
    age: 28,
    location: "Shanghai",
    from: "Wuhan",
    to: "Nanjing"
};

const jsonString = JSON.stringify(userData);
const parsedObject = JSON.parse(jsonString);
console.log(jsonString); // {"name":"Surpass","age":28,"location":"Shanghai","from":"Wuhan","to":"Nanjing"}
console.log(parsedObject); // {name: 'Surpass', age: 28, ...}

Control de la serialización con filtros

JSON.stringify() acepta un segundo parámetro opcional que actúa como filtro. Puede ser un array de claves a incluir o una función de reemplazo.

Filtro mediante array

Si se proporciona un array, solo las propiedades cuyos nombres aparezcan en él serán incluidas en la salida JSON.

const userData = {
    name: "Surpass",
    age: 28,
    location: "Shanghai",
    from: "Wuhan",
    to: "Nanjing"
};

const filteredJson = JSON.stringify(userData, ["name", "from"]);
console.log(filteredJson); // {"name":"Surpass","from":"Wuhan"}

Filtro mediatne función

Cuando se usa una función, esta recibe dos argumentos: la clave (siempre string) y el valor asociado. La función debe retornar el valor que se incluirá en la salida; si retorna undefined, la propiedad se omite.

const userData = {
    name: "Surpass",
    age: 28,
    location: "Shanghai",
    from: "Wuhan",
    to: "Nanjing"
};

const transformedJson = JSON.stringify(userData, (key, value) => {
    switch (key) {
        case "name":
            return value + "@";
        case "from":
            return value + "+";
        case "age":
            return value + 28;
        case "location":
            return undefined;  // Esta propiedad se elimina
        default:
            return value;
    }
});

console.log(transformedJson); // {"name":"Surpass@","age":56,"from":"Wuhan+","to":"Nanjing"}

Control de formato con sangría

El tercer parámetro de JSON.stringify() controla la sangría del resultado. Puede ser:

• Un número entero que indica la cantidad de espacios por nivel (máximo 10; valores mayores se tratan como 10).
• Una cadena de caracteres que se usará para cada nivel de sangría (ej. "++++").

const userData = {
    name: "Surpass",
    age: 28,
    location: "Shanghai",
    from: "Wuhan",
    to: "Nanjing"
};

const indentedJson = JSON.stringify(userData, null, 4);
console.log(indentedJson);
/* Salida:
{
    "name": "Surpass",
    "age": 28,
    "location": "Shanghai",
    "from": "Wuhan",
    "to": "Nanjing"
}
*/

const customIndent = JSON.stringify(userData, null, "++++");
console.log(customIndent);
/* Salida:
{
++++"name": "Surpass",
++++"age": 28,
++++"location": "Shanghai",
++++"from": "Wuhan",
++++"to": "Nanjing"
}
*/

Transformación durante el análisis (reviver)

De manera similar, JSON.parse() admite un segundo parámetro opcional llamado reviver. Esta función se ejecuta para cada par clave/valor en el objeto resultante. Puede modificar el valor o eliminar la propiedad devolviendo undefined.

const userData = {
    name: "Surpass",
    age: 28,
    location: "Shanghai",
    from: "Wuhan",
    to: "Nanjing",
    neighbour: ["Surpass"]
};

const newNeighbours = ["Kevin", "Tina", "Jeniffer"];

const jsonString = JSON.stringify(userData);
const modifiedObject = JSON.parse(jsonString, (key, value) => {
    if (key === "neighbour") {
        return newNeighbours;
    }
    return value;
});

console.log(JSON.stringify(modifiedObject, null, 4));
/* Salida:
{
    "name": "Surpass",
    "age": 28,
    "location": "Shanghai",
    "from": "Wuhan",
    "to": "Nanjing",
    "neighbour": [
        "Kevin",
        "Tina",
        "Jeniffer"
    ]
}
*/