EDUCBA

EDUCBA

MENUMENU
  • Blog
  • Free Courses
  • All Courses
  • All in One Bundle
  • Login
Home Software Development Software Development Tutorials TypeScript Tutorial TypeScript JSON parse

TypeScript JSON parse

TypeScript JSON parse

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:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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

Output:

TypeScript JSON parse

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

We hope that this EDUCBA information on “TypeScript JSON parse” was beneficial to you. You can view EDUCBA’s recommended articles for more information.

  1. TypeScript let
  2. TypeScript typeof
  3. TypeScript Generic
  4. What is TypeScript?
All in One Excel VBA Bundle
500+ Hours of HD Videos
15 Learning Paths
120+ Courses
Verifiable Certificate of Completion
Lifetime Access
Financial Analyst Masters Training Program
1000+ Hours of HD Videos
43 Learning Paths
250+ Courses
Verifiable Certificate of Completion
Lifetime Access
All in One Data Science Bundle
1500+ Hour of HD Videos
80 Learning Paths
360+ Courses
Verifiable Certificate of Completion
Lifetime Access
All in One Software Development Bundle
3000+ Hours of HD Videos
149 Learning Paths
600+ Courses
Verifiable Certificate of Completion
Lifetime Access
Primary Sidebar
All in One Software Development Bundle3000+ Hours of HD Videos | 149 Learning Paths | 600+ Courses | Verifiable Certificate of Completion | Lifetime Access
Financial Analyst Masters Training Program1000+ Hours of HD Videos | 43 Learning Paths | 250+ Courses | Verifiable Certificate of Completion | Lifetime Access
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2023 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more