0

I have the following data: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 &nbsp;</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 &nbsp;</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.

jones
  • 1,423
  • 3
  • 35
  • 76
  • 1
    Possible duplicate of [Angular 2 ngFor for nested json](https://stackoverflow.com/questions/47154554/angular-2-ngfor-for-nested-json) – Jota.Toledo Nov 14 '17 at 17:37
  • 1
    Possible duplicate of [How to do ngFor loop on nested json object?](https://stackoverflow.com/questions/43773676/how-to-do-ngfor-loop-on-nested-json-object) – Deblaton Jean-Philippe Nov 14 '17 at 17:58
  • @Jota.Toledo my data, and what i need is different from that, i have update my question, please check again. – jones Nov 14 '17 at 17:59
  • Possible duplicate of [access key and value of object using \*ngFor](https://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor) – Noémi Salaün Nov 14 '17 at 18:50

0 Answers0