
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}';
parse json string text
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.
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 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
Example - Convert JSON string to array of objects/interfaces
Sometimes, the response contains an array of objects, Creates an Employee interface with required fields, and Types the returned data to an 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
Conclusion
To Sum Up, Learned multiple ways to convert strings to json objects with examples.