I have the following data:
data = {
"dateFilters": {},
"search_param": "",
"search_term": "",
"workType": ["Part Time", "Full Time"],
"company.name": ["Company A", "Company B"]
};
I want to loop through this object and check if key is not dateFilters, search_param, and search_term, then loop that key and print its value.
I want some thing like this:
<span>workType
<a class="btn btn-link btn-xs btn-keyword mrgn-tp-sm">
<span class="wb-inv"></span>Part Time<span class="fa fa-times" aria-hidden="true"></span>
</a>
<a class="btn btn-link btn-xs btn-keyword mrgn-tp-sm">
<span class="wb-inv"></span>Full Time<span class="fa fa-times" aria-hidden="true"></span>
</a>
</span>
<span>company.name
<a class="btn btn-link btn-xs btn-keyword mrgn-tp-sm">
<span class="wb-inv"></span>Company A<span class="fa fa-times" aria-hidden="true"></span>
</a>
<a class="btn btn-link btn-xs btn-keyword mrgn-tp-sm">
<span class="wb-inv"></span>Company B<span class="fa fa-times" aria-hidden="true"></span>
</a>
</span>
My current code is like this and working:
<ng-container *ngIf="data?.workType">
<a *ngFor="let workType of data?.workType" (click)="removeWorkTypeAndSearch()" class="btn btn-link btn-xs btn-keyword mrgn-tp-sm"><span class="wb-inv">Remove keyword </span>{{ workType }}<span class="fa fa-times" aria-hidden="true"></span></a>
</ng-container>
<ng-container *ngIf="data?.functionalArea">
<a *ngFor="let functionalArea of data?.functionalArea" (click)="removeWorkTypeAndSearch()" class="btn btn-link btn-xs btn-keyword mrgn-tp-sm"><span class="wb-inv">Remove keyword </span>{{ functionalArea }}<span class="fa fa-times" aria-hidden="true"></span></a>
</ng-container>
But i want to have one dynamic section and no need to have separate loop for each key, because data object has a lot of key that need this loop.
Note: data elements are dynamic, they may be exist or not, i should not check by data.key, because it is unknown for me, its dynamically added, their may be a lot of other keys.
