Saltar al contenido

🥇 How to convert JSON object to JavaScript ▷ STEP BY STEP

In the world of programming there are several variables and objects that will allow you to contain one or more data. When it comes to arrays and their dimensions, JSONs are the first choice of use for all users who want to analyze or obtain data from an array. Due to their versatility, weight and ease of use, JSON arrays have become one of the most used in returning data proposed by a microservice, API-REST and others. If you are working with pure JavaScript or VanillaJS and are looking to convert a JSON to an object, read on because we will show you everything you need to do to achieve it.

How to read JSON in JavaScript

Steps to convert JSON object to JavaScriptEither by responding to an AJAX request (regardless of the method you use) it is very likely that you will receive data in JSON format. Respecting this format, it can be said with certainty that it is a JSON, so it remains to convert it into a variable or simply analyze it. To do this, simply follow the steps below:

Convert the JSON object to a Javascript array

Step 1: Identify the JSONThis step focuses on creating a JSON and placing it in a variable. For example, a JSON variable will be created with two «first and last» objects. It is very important to remember that this JSON array always comes in STRING format. You can also apply it to the answers you get from an AJAX request via http / s.

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

Step 2: Analyze JSONThis step consists in analyzing the JSON matrix in a JS matrix, so as to allow the capture of values. To do this, simply follow these steps.

let jsonParse = JSON.parse(json);

Loop through JSON Javascript

Step 2: Traverse ArrayOnce the jsonParse variable has been obtained with the conversion of all its objects, it is time to display these values ​​and for this it is necessary to follow these steps.

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

How to link the JSON array with dimensions?The previous example discussed was quite simple, because the JSON matrix does not contain dimensions, ie it comes with only two objects and two values. However, in other examples, arrayJSON arrays appear with the same objects, but with different values, as in the following example:

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

As you can see, there are two array objects, which in turn contain two String objects (in this case, first and last name). To display the information contained in the previous JSON, it is necessary to be in each of the positions or dimensions of the matrix). When obtaining a set of dimensional matrices, it is necessary to go through it from 0 and, to achieve this, it is recommended to use an iterative cycle, such as FOR. Here is a simple example to accomplish this:

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);


El nombre es pedro
Su apellido es rojas

El nombre es pamela
su apellido es gómez

That’s all. As you can see, converting JSON to object in JavaScript is quite simple. In the following guides you will be detailed with details on how to read JSON using AJAX and a backend language such as PHP. If you have any questions or concerns, you can leave a comment in the section below.