EDUCBA Logo

EDUCBA

MENUMENU
  • Explore
    • EDUCBA Pro
    • PRO Bundles
    • Featured Skills
    • New & Trending
    • Fresh Entries
    • Finance
    • Data Science
    • Programming and Dev
    • Excel
    • Marketing
    • HR
    • PDP
    • VFX and Design
    • Project Management
    • Exam Prep
    • All Courses
  • Blog
  • Enterprise
  • Free Courses
  • Log in
  • Sign Up
Home Software Development Software Development Tutorials TypeScript Tutorial TypeScript JSON parse
 

TypeScript JSON parse

Updated April 6, 2023

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.

Watch our Demo Courses and Videos

Valuation, Hadoop, Excel, Mobile Apps, Web Development & many more.

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

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?

Primary Sidebar

Footer

Follow us!
  • EDUCBA FacebookEDUCBA TwitterEDUCBA LinkedINEDUCBA Instagram
  • EDUCBA YoutubeEDUCBA CourseraEDUCBA Udemy
APPS
EDUCBA Android AppEDUCBA iOS App
Blog
  • Blog
  • Free Tutorials
  • About us
  • Contact us
  • Log in
Courses
  • Enterprise Solutions
  • Free Courses
  • Explore Programs
  • All Courses
  • All in One Bundles
  • Sign up
Email
  • [email protected]

ISO 10004:2018 & ISO 9001:2015 Certified

© 2025 - 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
Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more

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
EDUCBA

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

EDUCBA Login

Forgot Password?

🚀 Limited Time Offer! - 🎁 ENROLL NOW