Typescript tutorial - how to convert/parse String text to JSON Object example

how to convert/parse String text to JSON Object in typescript

In typescript/javascript, the response returned from REST API or back servers are in the form String JSON text, Developers need to know the ways to convert to JSON  or class object.

Typescript is a superset of javascript with type assertions feature. In javascript, we have used JSON.parse() method to convert to JSON, you can check here.

In this blog post, You will learn how to parse String text to typescript interface or Object with the following examples.

• JSON.parse() method
• String JSON text to Typescript class or interface object
• String to an array of the class object  example

Give a JSON text in String format - enclosed in single quotes.

let employee = '{"name": "Franc","department":"sales","salary":5000}';  

parse json string text

JSON.parse() method is used to parse give string JSON text and converted to JSON Object, This is plain javascript which works in typescript

const employee = '{"name": "Franc","department":"sales"}';  
console.log(typeof employee)  
let jsonObject = JSON.parse(employee);  
console.log(typeof jsonObject) //object  
console.log(jsonObject) //{ name: 'Franc', department: 'sales' }  
console.log(jsonObject.name)  // Franc  
console.log(jsonObject.department) // sales  

Output

  
string  
object  
{ name: 'Franc', department: 'sales' }  
Franc  
sales  

The returned object is a plain object, which can hold any data, The only concern with this approach is there is no use of typing to a class feature provided by typescript Instead of a plain object, if you transfer to Typescript custom object, you have many advantages, static typing available at compilation that gives validation errors.
  Let’s see an example convert String JSON class object in typescript.

Convert/parse String to Typescript class object

given string text,

  
const employee = '{"name": "Franc","department":"sales","salary":5000}';  

Write a class or interface with all the fields of a JSON object with type as follows

  
interface Employee {  
    name: string;  
    department: string;  
    salary: number;  
}  

Here is the example code to convert to object class, The declared object of Employee type which holds parsed JSON object

  
var jsonObject: Employee = JSON.parse(emloyee);  
  
console.log(typeof jsonObject) //object  
console.log(jsonObject) //{ name: 'Franc', department: 'sales' }  
console.log(jsonObject.name)  // Franc  
console.log(jsonObject.department) // sales  

Output

  
string  
object{ name: 'Franc', department: 'sales', salary: 5000 }  
Franc  
sales  

Example - Convert JSON string to array of objects/interfaces

Some times, the response contains an array of objects, Created Employee interface with required fields and Typed the returned data to array of class Cast data returned from JSON.parse() to Array of Employee

  
let response='[{"id":"1", "name":"Franc"}, {"id":"2","name":"Tom"}]';  
export interface Employee {  
    id: string  
    name: string  
}  
let responseObject:Employee[]= JSON.parse(response);  
console.log(response.length); //2