I am working on a task to present the data fetched from my GET API in JSON format in a tabular layout. Additionally, I want to include a search functionality for this table using a pipe. The code snippet I have written is as follows:
html
<div class="row" *ngIf="!addNewConfig">
<div class="col-xs-2">
<div class="form-group margin-b0px">
<label class="float-label with-icon" [class.empty]="searchField.length==0">
<span class="placeholder">Search a Config.
<span class="hide-placeholder"> </span>
</span>
<input [(ngModel)]="queryString" type="text" class="search">
</label>
</div>
</div>
<div class="col-xs-1 pull-right text-right clickable">
<img src="dvn/images/plus-icon.png" alt="Add" (click)="addNewConfig = true;">
</div>
</div>
<ng-container *ngIf="!addNewConfig">
<table *ngIf="!additionalInfo" class="primary-table table table-hover">
<thead>
<tr>
<th>Config NAME</th>
<th>NO. OF SOURCES</th>
<th>SRC NAME(S)</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let n of names | FilterPipe: queryString">
<td>
<a (click)="addtionalInfo = true" class="clickable">{{n}}</a>
<button (click)="getData()"> Test Get Request</button>>
</td>
<td>2</td>
<td>CardTransStream, SampleText1</td>
</tr>
</tbody>
</table>
The fetched JSON data is stored in the variable getdata and has the following structure:
[{
"configName": "config1",
"queryTimeThresholdInMs": 0,
"sources": [
{
"baseline": true,
"order": 0,
"query": "string",
"sourceId": "string",
"sourcePath": "string",
"sourceType": "string"
},
{
"baseline": false,
"order": 1,
"query": "string",
"sourceId": "string",
"sourcePath": "string",
"sourceType": "string"
}
]
},
{
"configName": "config2",
"queryTimeThresholdInMs": 0,
"sources": [
{
"baseline": true,
"order": 0,
"query": "string",
"sourceId": "string",
"sourcePath": "string",
"sourceType": "string"
},
{
"baseline": false,
"order": 1,
"query": "string",
"sourceId": "string",
"sourcePath": "string",
"sourceType": "string"
}
]
}]
I'm looking for a way to incorporate an ngFor loop in the table structure to display the configName along with other details such as the number of sources and source name in a tabular form without affecting the existing ngFor loop that enables searching by configName.