How to format JSON with Angular json pipe
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Displaying JSON objects in a readable format is essential for debugging and visualizing complex data structures in Angular applications. As the creator of CoreUI with over 11 years of Angular experience since 2014, I’ve used JSON formatting extensively for development and debugging. The most straightforward solution is to use Angular’s built-in json pipe, which converts objects to formatted JSON strings. This pipe is invaluable for quick debugging and displaying API responses during development.
Use the json pipe in Angular templates to format objects as readable JSON.
// component.ts
export class AppComponent {
user = {
id: 1,
name: 'John Doe',
email: '[email protected]',
address: {
city: 'New York',
country: 'USA'
}
}
}
<!-- template.html -->
<pre>{{ user | json }}</pre>
The json pipe transforms any JavaScript object into a formatted JSON string with proper indentation, making nested structures easy to read. Wrapping the output in a <pre> tag preserves the whitespace and formatting. This pipe is particularly useful during development to inspect component data, API responses, or complex state objects. The output is automatically updated when the object changes, providing real-time insight into your data.
Best Practice Note
This is the same debugging technique we use in CoreUI Angular development for inspecting component state. Remember to remove json pipe usage from production code as it’s primarily a development tool. For production data display, create proper UI components that show data in a user-friendly format rather than raw JSON.
