Built-In Angular Pipes -Part 4
Tags: angular, beginners, webdev, tutorial
Published: 2022-01-08 14:37:05

**T**oday 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 -

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odjgrmvusqitx5w3gxxa.PNG)
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 -
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uaqkxk7cunb0eodqcpdf.PNG)

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 -

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iso7q2ojgp3zolpq1395.PNG)

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 -
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5g5xhl0lt5fmn52x1t6.PNG)

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**!!!
<u>Happy Coding</u>