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

When dealing with responses from REST APIs or backend servers in TypeScript or JavaScript, they often come in the form of JSON text strings. Developers need to know how to efficiently convert these strings into JSON objects or class instances.

TypeScript, being a superset of JavaScript, offers additional features such as type assertions. In JavaScript, the JSON.parse() method is typically used for this conversion.

You can find an example here.

In this blog post, we will explore different methods to parse string text into TypeScript interfaces or objects, illustrated with the following examples:

  • Utilizing the JSON.parse() method
  • Converting String JSON text to a TypeScript class or interface object
  • Example of converting a String to an array of class objects

For instance, consider the following JSON text in string format enclosed in single quotes:

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

How to Convert a String Containing Text to JSON in TypeScript

The JSON.parse() method is used to parse a given string of JSON text and convert it to a JSON object. This is plain JavaScript that also 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, capable of holding any data.

However, one drawback of this approach is that TypeScript’s class typing feature is not utilized. Instead of a plain object, if you convert it to a TypeScript custom object, you gain several advantages such as static typing available at compilation, providing validation errors.

Let’s see an example of converting a String JSON to a class object in TypeScript.

How to Convert/Parse String to TypeScript Class Object

Let’s consider a string text.

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

Now, write a class or interface defining all the fields of a JSON object with their respective types.

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

Here’s the example code to convert the string to an object class. We declare an object of type Employee to hold the parsed JSON object:

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

Output:

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

How to Convert a JSON String to an Array of Objects/Interfaces in TypeScript

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

Convert the data returned from JSON.parse() to an 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(responseObject.length); // 2

Conclusion

In conclusion, we’ve learned multiple ways to convert strings to JSON objects with examples.