🥇 Cómo convertir JSON a objeto en JavaScript ▷ PASO A PASO

Dentro del mundo de la programación existen diversas variable y objetos que le permitirán contener uno o más datos. Cuando se trata de Arrays y dimensiones de las mismas, los JSON se encuentran en la primera opción de uso para todos los usuarios que desean parsear u obtener datos de una array o matriz. Dada su versatilidad, peso y fácil uso, los Array JSON han logrado ser uno de lo más utilizados en el retorno de datos propuestos por un microservicio, API-REST y otros. Si usted, está trabajando con JavaScript puro o VanillaJS y está buscando convertir un JSON a objeto, entonces sigan leyendo porque mostraremos todo lo necesario para lograrlo.

Cómo leer JSON en JavaScript

Pasos para convertir JSON a objeto en JavaScript
Ya sea por una respuesta a una solicitud mediante AJAX (independiente del método que este empleando) es muy probable que reciba una data con formato JSON. Al cumplir con dicho formato, se puede afirmar con certeza que es un JSON, por lo que queda convertirlo en una variable o simplemente parsearlo. Para hacer esto, simplemente deben seguir los pasos que se muestran a continuación:

Convertir objeto JSON a Array Javascript

Paso 1: Identificamos el JSON
Este paso, se enfoca en crear un JSON y colocarlo dentro de una variable. Para el ejemplo, se creará una variable JSON con dos objetos ‘nombre y apellido’. Es muy importante tener en cuenta que este array JSON viene siempre con formato STRING. También puede aplicarlo con las respuestas que obtiene de una petición AJAX mediante http/s.

let json = '{"nombre": "pedro", "apellido": "rojas"}';

Paso 2: Parsear JSON
Este paso consiste en parsear el array JSON a un arrayJS, de manera que permita capturar los valores. Para lograrlo, simplemente sigan estos pasos.

let jsonParse = JSON.parse(json);

Recorrer JSON Javascript

Paso 2: Recorrer Array
Ya obtenida la variable jsonParse con la conversión de todos su objetos, ha llegado la hora de mostrar dichos valores y para ello es necesario seguir estos pasos.

console.log("El nombre es: "+jsonParse.nombre);
console.log("El apellido es: "+jsonParse.apellido);

¿Cómo recorrer array JSON con dimensiones?
El ejemplo anterior se trató fue algo bastante sencillo, ya que el arrayJSON no contiene dimensiones, es decir viene con solo dos objetos y dos valores. No obstante, que en otros ejemplos aparezcan series de arrayJSON con los mismos objetos pero con diversos valores como el caso del siguiente ejemplo:

let json = '[{"nombre": "pedro", "apellido": "rojas"},'+
           '{nombre: "pamela", "apellido": "gómez"}]';

Como se logran dar cuenta, existen dos objetos de tipo array, que a su vez contienen dos objetos de tipo String (en este caso nombre y apellido). Para mostrar la información contenida en el JSON anterior, es necesario situarse en cada una de las posiciones o dimensiones del array). Cuando se obtiene un conjunto de array dimensionales, es necesario recorrerlo empezando desde 0, y para lograrlo, se recomienda utilizar un ciclo iterativo como es el FOR. A continuación se mostrará un ejemplo sencillo parar lograrlo:

let jsonParse = JSON.parse(json);
   
for (var i = 0; i < jsonParse.length; i++) {
     console.log("El nombre es: "+jsonParse[i].nombre);
     console.log("Su apellido es: "+jsonParse[i].apellido);
     console.log("");
}

Salida

El nombre es pedro
Su apellido es rojas

El nombre es pamela
su apellido es gómez

Eso es todo. Como puede ver, convertir JSON a objeto en JavaScript es bastante sencillo. En las próximas guías se detallará con detalles como leer JSON utilizando AJAX y un lenguaje backend como PHP. Si tiene dudas o consultas, puede dejar un comentario en el apartado que se encuentra más abajo.