Built-In Angular Pipes -Part 4

Today we will continue to learn the built in Angular pipes.
Pipes covered in this post -

JsonPipe
KeyValuePipe

JsonPipe
This pipe is used to format a data into JSON-format representation.
Mostly I use for debugging purpose.

It is Exported from the CommonModule

Syntax
{{ value_expression | json }}

Its a simple pipe.
Lets see the example. Our project folder -

In the component.ts file lets write the below code -

  jsonPipeData = {
    studentName: "John Doe",
    studentMarks: 423
  };

& in the html lets paste in the below code -

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

Now, lets see the output -

Here you can see without the pipe the output is [object Object]
It is not able to process the code. But after using the pipe we can view the correct data.
So, you can use this pipe to verify the data coming in the component by displaying directly in the template.

KeyValuePipe
This pipe is used to convert an Object or Map into an array of key value pair.

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

It is Exported from CommonModule

Parameters
compareFn
If you want to provide a custom sorting function.
It is Optional
Default is the defaultComparator which Angular provides to sort.

Now lets see an example -
So in the component.ts file lets add the below code -

  obj = {
    'chair': '23',
    'banana': '3',
    'apple': '4',
  };

Please note that we have put the first key as chair and apple at the end.

Now lets paste the below code in the template file.

<hr>

<h2>KeyValue Pipe</h2>
{{ obj | keyvalue | json }}

You would see the below output -

Here few important points to observe -

1. We have added one more pipe the json pipe along with the keyvalue. So we can chain multiple pipe at the same time. Output of the first pipe acts as the input to the second.
2. In the output you can see the key apple came at the beginning (it got sorted) while chair at the end although the value provided was opposite.
3. We received an array of key-value objects.

Note
We already saw a glimpse of sorting. The keyValue pipe use the defaultComparator to sort the output values.
Following ae the key points to note-

1. If the key is a number then it will sort in Ascending Order.
2. If key is string then it will sort in alphabetic order.
3. If key is of different type then it will get converted to string
4. If key is null or undefined then it will be put at the very end.

Custom Sorting Values using compareFn
Now lets write a custom function which will sort the list on its values. So paste in the below code in the component.ts file

 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
  }

& in the template file we need to pass the compare function also -

{{ obj | keyvalue: orderbyValueAsc | json }}

So we write : orderbyValueAsc

The output in the browser you will see -

There can be a scenario where you want to keep the original value. In that case we can write the below function in the component ts file -
keepOriginal(a: any, b: any) {
return a;
}


That's all for now. I will be discussing on the remaining pipes in the coming posts. So stay tuned.

Hope you enjoyed the post.
If yes do like share and comment.

Cheers!!!
Happy Coding