Exploring JsonPipe and KeyValuePipe

In this installment of our series on built-in Angular pipes, we examine two more utilities: JsonPipe and KeyValuePipe.

Understanding JsonPipe

This pipe transforms data into its JSON string representation. It is particularly handy during development for inspecting values directly in the template.

The JsonPipe is exported from the CommonModule.

Syntax
{{ value_expression | json }}

The pipe itself is quite straightforward. Consider the following project structure:

Built-In Angular Pipes -Part 4 — figure 1
Inside the component class, we add the following:

  jsonPipeData = {
    studentName: "John Doe",
    studentMarks: 423
  };
Enter fullscreen mode Exit fullscreen mode

Then, in the template, we place this markup:

<h2>JSON Pipe</h2>
<h4>Without the pipe</h4>
<p>{{jsonPipeData}}</p>
<br>
<h4>With the pipe</h4>
<p>{{jsonPipeData | json}}</p>
Enter fullscreen mode Exit fullscreen mode

Observing the rendered output:

Built-In Angular Pipes -Part 4 — figure 2

Without the pipe, the expression renders as [object Object], which is not useful. Applying json reveals the actual data structure. This makes JsonPipe invaluable for validating what data is arriving in your component by displaying it directly.

Working with KeyValuePipe

This pipe converts an Object or Map into an array of key-value pairs, enabling straightforward iteration in templates.

Syntax
{{ input_expression | keyvalue [ : compareFn ] }}

The pipe is exported from CommonModule.

Parameters
compareFn — an optional custom sorting function. When omitted, Angular's built-in defaultComparator handles ordering.

Let's look at a practical example. In the component file, we add:

  obj = {
    'chair': '23',
    'banana': '3',
    'apple': '4',
  };
Enter fullscreen mode Exit fullscreen mode

Notice that we intentionally place chair first and apple last in the object literal.

In the template, we insert:

<hr>

<h2>KeyValue Pipe</h2>
{{ obj | keyvalue | json }}
Enter fullscreen mode Exit fullscreen mode

The result appears as follows:

Built-In Angular Pipes -Part 4 — figure 3

Several noteworthy observations from this example:

  1. We applied the json pipe after keyvalue, demonstrating how pipes can be chained—the output from one becomes the input to the next.
  2. The ordering shifted: the key apple now appears first and chair last, even though the input had them reversed. Sorting occurred automatically.
  3. The pipe produced an array where each element is an object with key and value properties.

Sorting Behavior
As hinted above, KeyValuePipe relies on defaultComparator to order entries. Here's what that entails:

  1. Numeric keys are ordered in ascending numeric sequence.
  2. String keys follow alphabetical order.
  3. Keys of mixed types are coerced to strings before comparison.
  4. Keys that are null or undefined are pushed to the end.

Custom Sorting with compareFn

To gain control over ordering, you can supply your own comparator. For instance, to sort by the values in ascending order, add this function to the component:

 orderbyValueAsc = (a: KeyValue<string, string>, b:
 KeyValue<string, string>): number => {
    return Number(a.value) < Number(b.value) ? -1 : 
(Number(a.value) > Number(b.value)) ? 0 : 1
  }
Enter fullscreen mode Exit fullscreen mode

Then, reference that function in the template:

{{ obj | keyvalue: orderbyValueAsc | json }}
Enter fullscreen mode Exit fullscreen mode

The syntax becomes : orderbyValueAsc.

The browser displays this output:

Built-In Angular Pipes -Part 4 — figure 4

There might be situations where preserving the original insertion order is preferable. In that case, a comparator like this keeps the sequence intact:

keepOriginal(a: any, b: any) {
return a;
}

We'll pick up with the remaining pipes in future posts. Stay tuned for more.

If you found this helpful, please like, share, and leave a comment.