Convertir un string JSON a un objeto en JavaScript y viceversa

Un JSON (JavaScript Object Notation) básicamente se puede decir que es un objeto javaScript metido dentro de una cadena de texto, aunque en realidad no es del todo cierto. JSON es una sintaxis para serializar objetos para el intercambio de datos basado en la nomenclatura de javaScript, es decir, son muy similares, pero no son iguales, por ejemplo, en JSON los nombres de las variables tienen que estar entre comillas dobles «» y en javaScript no.

Vamos a lo que vamos, hay 2 casos de conversión que podemos querer hacer JSON javaScript por ejemplo si tenemos guardado un JSON en el localStorage o si el método por el que lo obtenemos no hace la transformación automáticamente, y javaScript JSON para hacer el proceso inverso y enviar o almacenar nuestros objetos javaScript.

¿Cómo convertir un JSON a un objeto en javaScript?

Si tenemos un string con un JSON lo podemos transformar en un objeto javaScript usando la función JSON.parse(json) que nos devolverá el objeto correspondiente a nuestro JSON.

var jsonTexto = '{"color":"blanco","km":100000,"esNuevo":false,"rueda":{"marca":"desconocida","estado":"malo"}}';
var coche = JSON.parse(jsonTexto);
console.log(coche);
// Resultado -> Object { color: "blanco", km: 100000, esNuevo: false, rueda: { marca: "desconocida", estado: "malo" } }

También existe la posibilidad de pasarle una función si queremos hacer algún tratamiento a la hora de generar el objeto javaScript desde el JSON, por ejemplo si quisiésemos que los colores los pudiésemos utilizar para pintar un CSS podríamos utilizar una función del siguiente estilo:

function reviver(clave, valor) {
    if (clave == "color") {
        switch(valor) {
            case "blanco":
                valor = "#fff";
                break;
            case "rojo":
                valor = "#f00";
                break;
            default:
                valor = "#000";
                break;       
        }
    }

    return valor;
}

var jsonTexto = '{"color":"blanco","km":100000,"esNuevo":false,"rueda":{"marca":"desconocida","estado":"malo"}}';
var coche = JSON.parse(jsonTexto, reviver);
console.log(coche);
// Resultado -> Object { color: "fff", km: 100000, esNuevo: false, rueda: { marca: "desconocida", estado: "malo" } }

¿Cómo transformar un objeto javaScript en un JSON?

Para crear un JSON a partir de un objeto javaScript podemos utilizar la función JSON.stringify(objeto) que genera un string con el JSON correspondiente al objeto que se le pase como parámetro.

Vamos a ver cómo funciona esta función y los parámetros que se le pueden pasar para conseguir diferentes resultados. El ejemplo de objeto que vamos a convertir es este:

var rueda = {};
rueda.marca = "desconocida";
rueda.estado = "malo";

var coche = {};
coche.color = "blanco";
coche.km = 100000;
coche.esNuevo = false;
coche.rueda = rueda;

El caso más simple es en el que solo le pasamos el objeto que queremos convertir a JSON, en este caso vamos conseguir el objeto completo en formato JSON.

var jsonCompleto = JSON.stringify(coche); 
console.log(jsonCompleto); 
// Resultado -> {"color":"blanco","km":100000,"esNuevo":false,"rueda":{"marca":"desconocida","estado":"malo"}}

Para el 99% de los casos con esto es suficiente, pero si no es nuestro caso pues tenemos la posibilidad de controlar la forma en la que construye y las propiedades que se van a incluir en el JSON final con un segundo parámetro en el que podemos poner una función que va a tener 2 parámetros clave o nombre de la propiedad y valor y la que podemos hacer lo que creamos oportuno.

Por ejemplo para que no pueda haber valores de 50000km y que los boolean se manden como cadenas de texto podríamos hacer la siguiente función.

function remplazador(clave, valor) {
    if (clave == "km" && valor > 50000) {
        valor = 50000;
    }

    if (typeof valor == "boolean") {
        valor = "" + valor;
    }

    return valor;
}
var jsonPersonalizado = JSON.stringify(coche, remplazador); 
console.log(jsonPersonalizado );
// Resultado -> {"color":"blanco","km":50000,"esNuevo":"false","rueda":{"marca":"desconocida","estado":"malo"}}

Si la función devuelve undefined, entonces esa propiedad no se envía, si en el ejemplo anterior cambiamos el 50000 por el undefined entonces el JSON resultante sería {"color":"blanco","esNuevo":"false","rueda":{"marca":"desconocida","estado":"malo"}}.

Otra opción es que en lugar de pasarle una función como segundo parámetro le pasemos un array con la lista de propiedades que se quieren incluir en el JSON y el resto no aparecerán. Esta opción es muy útil cuando tenemos objetos complejos y solo queremos enviar parte de su información sin necesidad de crear objetos específicos para ello.

 
var jsonPersonalizado = JSON.stringify(coche, ['km', 'color', 'rueda','marca']); 
console.log(jsonPersonalizado);
// Resultado -> {"km":100000,"color":"blanco","rueda":{"marca":"desconocida"}}

De momento tenemos la función JSON.stringify(objeto, remplazador) que nos generará el JSON y la posibilidad de personalizar el JSON resultante con una función o con una lista de parámetros, adicionalmente puede recibir un tercer parámetro para formatear la salida y que no sea un JSON compactado.

 
var jsonFormateado = JSON.stringify(coche, null, '\t'); 
console.log(jsonFormateado);
/* Resultado ->
{
  "color": "blanco",
  "km": 100000,
  "esNuevo": false,
  "rueda": {
    "marca": "desconocida",
    "estado": "malo"
  }
}
*/

var jsonFormateado2 = JSON.stringify(coche, null, '_'); 
console.log(jsonFormateado2);
/* Resultado ->
{
_"color": "blanco",
_"km": 100000,
_"esNuevo": false,
_"rueda": {
__"marca": "desconocida",
__"estado": "malo"
_}
}
*/