Menu
Question
[Question]

Quickly displaying-debugging the values of an array in Angular2  

I have an array called employees in my Angular2 component and I want to see what data it has. If I do something like this:

<p>{{ employees }}</p>

it just displays [object Object]

Is there any Angular2 way that lets me quickly display the value it contains?
1 Answers

Use JsonPipe in your HTML expression. It applies JSON.stringify() to your data and display its JSON representation properly.

To use a pipe, you have to add the | (pipe) character after your expression followed by the name of the pipe you want to use. The resultant data of the expression is passed through the pipe and then the specified pipe is applied to it thereby transforming the data.

<p>{{ employees | json }}</p>

The resulting HTML will be like this:

<p>[ { "name": "Emp 1" }, { "name": "Emp 2" } ]</p>

asked Apr 07, 2016
viewed 823 times
active Apr 07, 2016
Looking for a job?
Accenture
New York

Groundswell Cloud Solutions
Vancouver, Canada

Startup (stealth)
London, UK

Microsoft
Seattle


Related
• Quickly displaying the values of an array in Angular2
• How to: Interpolation Expressions in Angular2
• Server Side Rendering in JavaScript?
• Store money in USD, convert and display Euro, and then apply Angular filter on Euro values
• Store money in USD, convert and display Euro, and then apply Angular filter on Euro values
• How to return multiple values from a function in ES6