Searching through an array of objects and arrays is very similar to the above implementation,but with small changes.

Consider the below array of JSON objects and arrays exported from cakes.ts

//cakes.ts
export const cakes=[
{
“id”: “0001”,
“type”: “donut”,
“name”: “Cake”,
“ppu”: 0.56,
“batters”:{
“batter”:[
{ “id”: “1001”, “type”: “Regular” },
{ “id”: “1002”, “type”: “Chocolate” },
{ “id”: “1003”, “type”: “Blueberry” },
{ “id”: “1004”, “type”: “Devil’s Food” }]
},
“topping”:[
{ “id”: “5001”, “type”: “None” },
{ “id”: “5002”, “type”: “Glazed” },
{ “id”: “5005”, “type”: “Sugar” },
{ “id”: “5007”, “type”: “Powdered Sugar” },
{ “id”: “5006”, “type”: “Chocolate with Sprinkles” },
{ “id”: “5003”, “type”: “Chocolate” },
{ “id”: “5004”, “type”: “Maple” }]
},
{
“id”: “0002”,
“type”: “donut”,
“name”: “Raised”,
“ppu”: 0.12,
“batters”:{
“batter”:[
{ “id”: “1001”, “type”: “Strawberry” }]
},
“topping”:[
{ “id”: “5001”, “type”: “Vanilla” },
{ “id”: “5002”, “type”: “Mango” },
{ “id”: “5005”, “type”: “Cherry” },
{ “id”: “5003”, “type”: “Chocolate” },
{ “id”: “5004”, “type”: “Butterscotch” }]
},
{
“id”: “0003”,
“type”: “donut”,
“name”: “Old Fashioned”,
“ppu”: 0.34,
“batters”:{
“batter”:[
{ “id”: “1001”, “type”: “Regular” },
{ “id”: “1002”, “type”: “Vanilla” }
]
},
“topping”:[
{ “id”: “5001”, “type”: “None” },
{ “id”: “5002”, “type”: “Chocolate Chips” },
{ “id”: “5003”, “type”: “Black Currant” },
{ “id”: “5004”, “type”: “Pista” }
]}
]

It is an array of 3 JSON objects. Each object describes the batter and topping for a different type of Cake.

Each object contains properties having 4 types of values: String,Number,Object and Array.

Template:

<input type=”text” [(ngModel)]=”searchTerm” name=”searchTerm” placeholder=”Search”>

<ul>
<li *ngFor="let x of cakes|filter:searchTerm">
<div>
 {{x.name}}-
Type: {{x.type}}-
PPU: {{x.ppu}}
</div>
<span>Batters</span>
<ul>
<li *ngFor="let y of x.batters.batter">
 {{y.id}}:
 {{y.type}}
</li>
</ul>
<span>Toppings</span>
<ul>
<li *ngFor="let z of x.topping">
 {{z.id}}:
 {{z.type}}
</li>
</ul>
</li>
</ul>

We have constructed a list with the above JSON data.

**appHighlight **is the selector for a directive that highlights the search results in the list below.

#angular #array-of-objects-arrays #searching #pipes