Cómo convertir JSON a objeto JavaScript

En esta guía, aprenda a convertir una cadena JSON en un objeto o matriz de JavaScript mediante JSON.parse().

JSON (Notación de objetos de JavaScript) se ha convertido en el formato de serialización de facto para las API REST, debido al hecho de que es legible por humanos, simple y de tamaño pequeño.

Utiliza la misma notación que se usa para definir objetos de JavaScript y, naturalmente, es extremadamente sencillo convertir entre una cadena JSON y objetos de JavaScript.

Trabajaremos con la siguiente cadena JSON:

1
const jsonString = '{"author" : "Plato", "name" : "Republic", "releaseYear" : "375BC"}';

Convertir cadena JSON en objeto JavaScript

El módulo JSON ofrece dos métodos: stringify(), que convierte un objeto JavaScript en una cadena JSON, y parse(), que analiza una cadena JSON y devuelve un objeto JavaScript.

Está integrado en el propio idioma, por lo que no es necesario instalar ni importar ninguna dependencia:

1
2
3
const book = JSON.parse(jsonString);
console.log('Type: ', typeof book);
console.log('Contents: ', book)

Esto resulta en:

1
2
3
4
5
6
7
Type: object
Contents: 
{
  author:"Plato",
  name:"Republic",
  releaseYear:"375BC"
}

Puede tener la tentación de eval() una cadena en un objeto, pero esté cansado de la práctica:

1
2
3
const book = eval("(" + jsonString + ")")
console.log('Type: ', typeof book);
console.log('Contents: ', book)

Esto funciona bien:

1
2
3
4
5
6
7
Type: object
Contents: 
{
  author:"Plato",
  name:"Republic",
  releaseYear:"375BC"
}

Sin embargo, este método también es susceptible a la inyección de código. eval() evaluará y ejecutará cualquier texto arbitrario que ingrese, siempre que se pueda ejecutar. Si nuestro jsonString se cambió a:

1
const jsonString = 'console.log("Malicious code")';

Entonces simplemente evaluarlo daría como resultado:

1
2
const book = eval("(" + jsonString + ")")
// Malicious code

En última instancia, es cierto que JavaScript se ejecuta, en gran medida, en la máquina del cliente, en la que puede evaluar y ejecutar cualquier código que desee dentro del navegador. Sin embargo, se ha producido un cambio de paradigma importante en los últimos años, y JavaScript se usa cada vez más en el lado del servidor también. A pesar de que la seguridad de la inyección de código recae en última instancia en el lado del servidor, dado que realmente no puede evitarlo en el front-end, existe la posibilidad de que JavaScript también se esté ejecutando en el lado del servidor.

Convertir cadena JSON en matriz de JavaScript

Aunque puede analizar JSON en cualquier objeto arbitrario, una estructura de datos común en la que convertirá los datos son matrices. Las matrices JSON están contenidas entre corchetes y los elementos de las matrices están separados por comas:

1
[element1, element2, element3]

Un elemento puede ser un elemento independiente, otro objeto JSON u otra matriz, que a su vez también puede contener cualquiera de estos tipos. Echemos un vistazo a dos matrices: una simple con algunos elementos y otra que contiene varios objetos JSON:

1
2
3
4
5
6
7
8
const simpleArrayJson = '["Java", "Python", "JavaScript"]';
const objectArrayJson = '[{"name": "Java", "description": "Java is a class-based, object-oriented programming language."},{"name": "Python", "description": "Python is an interpreted, high-level and general-purpose programming language."}, {"name": "JS", "description": "JS is a programming language that conforms to the ECMAScript specification."}]';

const simpleArray = JSON.parse(simpleArrayJson);
const objectArray = JSON.parse(objectArrayJson);

console.log(simpleArray);
console.log(objectArray);

Esto resulta en:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
[
  "Java",
  "Python",
  "JavaScript"
]

[
  {
    name:"Java",
    description:"Java is a class-based, object-oriented programming language."
  },
  {
    name:"Python",
    description:"Python is an interpreted, high-level and general-purpose programming language."
  },
  {
    name:"JS",
    description:"JS is a programming language that conforms to the ECMAScript specification."
  }
]

Conclusión

En este breve tutorial, analizamos cómo convertir una cadena JSON en un objeto JavaScript y comentamos una mala práctica que podría introducir vulnerabilidades en su código.