How can we sort an array according to selected name

Question

Here is my data which i get from api. Just a sample data.

  Id   CategoryName   itemTitle   itemvalue
     1    General       Height         155
     2    Lipid         Cholestrol     25
     3.   NIBP          SBP             85

And here is the UI i have i wanted to put the General at the top of the list. I wanted to select it by name like "General" not by id because same id repeated at my data. So i cannot select it by Id to get the desired output.

And this is the html i have

 <mat-expansion-panel 
                  *ngFor="let hubxReport of hubxReportList | sort:'asc':'displayOrder'; let i=index" class="fontsize">
                  <mat-expansion-panel-header>
                    <mat-panel-title >
                      <h6 class="fontsize" >{{hubxReport.categoryName}}</h6>
                    </mat-panel-title>

                  </mat-expansion-panel-header>

                  <div class="row">
                    <div *ngFor="let item of hubxReport.hubxDataItems" class="col-sm-4">
                      <mat-form-field class="example-full-width lineheight25 fontsize">
                        <input
                          class="fontsize"
                          matInput
                          autofocus
                          placeholder="{{ item.itemTitle }}"
                         />
                         <ng-container [ngSwitch]="item.itemTitle" id="container">
                          
                          <img class="img thumbnail" (click)="openDialogImg(myTemplate)"
                            *ngSwitchCase="
                              ['Graph1', 'Graph2'].includes(item.itemTitle)
                                ? item.itemTitle
                                : !item.itemTitle
                            "
                            [src]="_sanitizer.bypassSecurityTrustResourceUrl(item.itemValue)"
                            [alt]="item.itemTitle"
                          /> 
                          <!-- this template is invisible. It will be shown in the popup -->
                         <ng-template #myTemplate>                          
                           <!-- this is a big popup image.  -->
                           <img [src]="_sanitizer.bypassSecurityTrustResourceUrl(item.itemValue)" style="height:100%; width:100%">
                           <button id = "x" mat-button (click)="myDialogRef?.close()">X</button>
                         </ng-template>                        
                          <span *ngSwitchDefault>{{ item.itemValue }}</span>
                        </ng-container>
                        &nbsp;
                        {{ item.itemUnit }}
                       
                      </mat-form-field>
                    </div>
                  </div>

So how can i achieve it. can we achieve it by using pipe. If there is best way to achieve it that will be helpfull.

Answer 1

To sort your array you can use something like String.prototype.localeCompare()

reports.sort((a, b) => a.categoryName.localeCompare(b.categoryName))