Introduction to TypeScript JSON parse
To convert our string of JSON into an object, we can use the JSON parse method for it. As we know that the TypeScript is the subscript of JavaScript, so we can use its methods. JSON parse method is a JavaScript method but can be easily used in TypeScript like any other functions so far. To use the JSON parse method in TypeScript, we do not need to include any external library; for this, we can use it directly wherever we want.
Syntax:
As seen, it is used to parse the string into an object; also, it is available in the standard TypeScript library.
JSON.parse(your_variable);
As you can see in the above syntax for JSON parse methods, it takes one parameter as the input param here and later converts it into the object in TypeScript.
Example:
Code:
JSON.parse('{your json here}');
How JSON parse Method Work in TypeScript?
As we already know, the JSON parse method is used to parse the string into an object in TypeScript. It is the method available in JavaScript. The string of JSON should follow the standard define by JSON like they should be in a key-value pair. Then only it will able to convert them into the specified object. In this section first we will see JSON parse method signature in detail see below;
Method Signature:
JSON.parse(text[, reviver]): This is the parse method’s signature defined by the javascript documentation. So as we can see, it takes up two parameters here. But the second parameter is optional. The first parameter would be the string of JSON into key-value pair in TypeScript.
1. Text
This parameter would be the string JSON.
Example:
Code:
'{"key":value}'
Your JSON string should look like this. Then only it will parse them into the object; otherwise, we will receive exception at runtime in TypeScript.
2. Return Type
This parse method can return anything: string, array, object, null, number, boolean, etc.
3. Reviver
This is the second parameter of the JSON parse method, which is totally optional in TypeScript.
Now let’s see one sample example to understand its internal working.
Example:
Code:
const myjson = '{"key1":"val1", "key2":"val2"}';
const result = JSON.parse(myjson);
let mvalue = result.key2
console.log(mvalue);
In the above lines of code, as you can see, we are not using any external library to implement the JSON parse method in TypeScript; it is already available in the standard library. So first, we are trying to create the string of JSON. This should be in key-value pair. We named the string as ‘myjson’; after this, we are calling JSON.parse() method, and inside this, we are passing the variable that we have created.
So now it will test all the syntax and validate the passing JSON is correct or not. It should contain separated commons and also single quotes while using or preparing it. If the JSON is not correct, it will throw a runtime exception saying syntaxError while parsing the string. Immediately after this line, we have our object, which contains the json as an object, and their key and values can be access via their names. To access any object value, we can use the below syntax.
Example:
Code:
result_object.name_of_key;
As you can see in the above lines of code, we can access the key-value by using its name only. So this makes the access oj object easy as well.
Example of TypeScript JSON parse
Given below is the example mentioned:
In this, we are trying to define several key and value inside the string json. After this, we converted it to an object in Typescript. After that, only we can access the object value from the JSON object available.
Code:
const myjson = '{"key1":"val1", "key2":"val2", "key3":"val3", "key4":"val4", "key5":"val5", "key6":"val6", "key7":"val7", "key8":"val8", "key9":"val9", "key10":"val10", "key11":"val11"}';
const result = JSON.parse(myjson);
let mvalue1 = result.key1
let mvalue2 = result.key2
let mvalue4 = result.key3
let mvalue5 = result.key4
let mvalue6 = result.key5
let mvalue7= result.key6
let mvalue8 = result.key7
let mvalue9 = result.key8
let mvalue10 = result.key9
let mvalue11 = result.key10
console.log( "first value is ::" +mvalue1);
console.log( "second value is ::" +mvalue2);
console.log( "fourth value is ::" +mvalue4);
console.log( "fifth value is ::" +mvalue5);
console.log( "six value is ::" +mvalue6);
console.log( "seven value is ::" +mvalue7);
console.log( "eight value is ::" +mvalue8);
console.log( "nine value is ::" +mvalue9);
console.log( "ten value is ::" +mvalue10);
3 Online Courses | 7 Hands-on Projects| 25+ Hours| Verifiable Certificate of Completion
4.5
View Course
Output:
Rules and Regulation for JSON parse Method
There are some rules which needs to be taken while using the JSON parse method in TypeScript:
1. It takes two parameters, but the second parameter is the optional one, and the first one takes the input which needs to be parsed.
2. We should be very cautious while passing the string to parse inside the method.
- The first one is it should not contain the single quotes inside the JSON string, which will make the JSON invalidate and hard to parse. As you can see in the below line of code, we are trying to wrap our key inside the ‘single quotes’ so it will make the string json invalidate.
Code:
error : "{'key': some_value}"
3. Also, it should not contain the trailing commons in between the input.
- ‘[300, 700, 800, ]’: Like this, it should not contain the commas; otherwise, it will make the input invalidate, and it will throw syntaxError while parsing it.
Conclusion
By using the JSON parse method, we can easily parse the JSON string. Also, it will make it easy to use the object and access its value. This can be useful when we have a response from the backend, which we want to parse to some object and access their values.
Recommended Articles
This is a guide to TypeScript JSON parse. Here we discuss the introduction, how JSON parse method work in TypeScript? Example, rules and regulation. You may also have a look at the following articles to learn more –
