How to JSON.parse directly in html file in Typescript / Angular, or access json fields as objects?

after not finding an answer for what I was looking for, i’m asking this question.

Due to the fact that I need to avoid duplicates in a map, I had to stringify the map key. But later in the HTML file i need to get key’s fields in order to display and style.

Is there a way to achieve my goal?

component.ts:

criteriaFilters = new Map<any, boolean>();

ngOnChanges() {
    if (this.audit.getValue().chapitres) {
      for (const chapitre of this.audit.getValue().chapitres) {
        for (const auditCritereEval of Object.entries(chapitre.auditCritereEvaluations)) {
          if (auditCritereEval !== undefined) {
            if (auditCritereEval != null) {
              if (!this.criteriaFilters.has(JSON.stringify(auditCritereEval))) {
                console.log(auditCritereEval);
                this.criteriaFilters.set(JSON.stringify(auditCritereEval), true);
              }
            }
          }
        }
      }
      this.criteriaFilters.set('NOTSEEN', true);
    }
  }

component.html:

<div class="row mb-3">
        <div class="col-12">
          <label>{{'audit.filter.critere'}}</label>
          <div>
            <mat-button-toggle-group multiple (change)="updateCriteriaFilter($event)">
              <ng-container *ngFor="let filter of criteriaFilters.keys()">
                <mat-button-toggle *ngIf="filter != 'NOTSEEN'"  [value]="filter" [checked]="true">
                  <i class="las la-square-full" [style.color]="JSON.Parse(filter).value.color"> </i>
                  {{JSON.Parse(filter).value.label}}
                </mat-button-toggle>
                <mat-button-toggle *ngIf="filter == 'NOTSEEN'" [value]="filter" [checked]="true">
                  <i class="las la-eye-slash"></i>
                  {{ 'EE.Core.Audit.Audit.Results.Unseen' | translate }}
                </mat-button-toggle>
              </ng-container>
            </mat-button-toggle-group>
          </div>
        </div>
      </div>

JSON representation of the key [which is also a map(chapitre.auditCritereEvaluations)]:

[
    "23102",
    {
        "id": 23102,
        "label": "Conforme",
        "shortLabel": null,
        "reportingLabel": "Conforme",
        "position": 0,
        "color": "#008000",
        "conforme": true,
        "nonApplicable": false,
        "note": 1,
        "auditTypeCritereEvaluationId": 8331
    }
]

So as you see I need to access fields in the <i> tag (especially the label and color fields) when the filter is not ‘NOTSEEN’ (inside the first *ngif). So I wanna know if there’s anything to put in place of the JSON.parse() in the html file in order to access fields. If possible I would like not to have to create a TS function.

Thanks In advance for your answers.