Typescript How to convert/parse String text to JSON Object

Typescript How to convert/parse String text to JSON Object

how to convert String to JSON Object in typescript?

The response returned from REST API or back servers in typescript/javascript is in the form of String JSON text, and developers must know how to convert it to JSON or class object.

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

In this blog post, 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}';

How to Convert String contains text to JSON in typescript

JSON.parse() method is used to parse give string JSON text and convert 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 in 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 of converting String JSON class object in typescript.

How to Convert/parse String to Typescript class object

Let’s have a string text,

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

Write a class or interface with all the fields of a JSON object with the 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

How to Convert JSON string to array of objects/interfaces in typescript

Sometimes, the response contains an array of objects. First, Creates an Employee interface with required fields and map these fields with types that has returned data of an array.

Convert 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

Conclusion

To Sum Up, Learned multiple ways to convert strings to json objects with examples.