Как повторно использовать логи c для сортировки по возрастанию и убыванию в angular машинописи

Question

Я работаю над приложением angular, в котором я могу сортировать данные в порядке возрастания и убывания. Хотя все работает нормально, я хочу оптимизировать свой код, чтобы не повторяться и писать эффективный код.

Вот мой пример данных в консоли Пример данных в консоли

У меня есть массив объектов, где я хочу отсортировать данные в порядке возрастания и убывания onclick. Каждый раз, когда я Вызов функции для каждого поля. Есть ли лучший способ сделать это

Вот мой код

data.ts

 sortedData
]
 private isAscendingSort: boolean = false;

 sortByMaxCases(sortedDataBasedOnDate) {
    this.isAscendingSort = !this.isAscendingSort;
    console.log(this.isAscendingSort)
    sortedDataBasedOnDate.forEach(item => item.statewise.sort(function (a, b) {
      if (b.confirmed < a.confirmed) {
        return -1;
      }
      if (b.confirmed > a.confirmed) {
        return 1;
      }
      return 0;
    }))

    if (!this.isAscendingSort) {
      console.log(this.isAscendingSort)
      sortedDataBasedOnDate.forEach(item => item.statewise.sort(function (a, b) {
        if (a.confirmed < b.confirmed) {
          return -1;
        }
        if (a.confirmed > b.confirmed) {
          return 1;
        }
        return 0;
      }))

    }
  }

// similary I have 
sortAscendingActive(sortedData)(){..}  // here with same logic compairig a.active > b.active
sortAscendingActive(sortedData){....} // compairig a.confirm > b.confirm
sortAscendingActive(sortedData){..} // compairig a.death> b.death

data.component. html

<tr>
   <th (click)="sortAscending(sortedData)">    State   </th>
   <th (click)="sortAscendingActive(sortedData)">   Active Cases  </th>
   <th (click)="sortAscendingConfirmed(sortedData)"> Confirmed Cases  </th>
   <th (click)="sortAscendingDeath(sortedData)">   Death  </th>
</tr> 

Здесь я получаю целые данные в SortedData, а затем выполняю сортировку по щелчку функции, но это выглядит так неуклюже. Есть лучший способ сделать мой код эффективным

Answer 1

Вы можете передать переменные в виде строки и получить к ним доступ в квадратных скобках

<tr>
  <th (click)="sort('state')">    State   </th>
  <th (click)="sort('active')">   Active Cases  </th>
  <th (click)="sort('confirmed')"> Confirmed Cases  </th>
  <th (click)="sort('deaths')">   Death  </th>
</tr>

export class AppComponent {
  stateAsc: boolean = false;
  activeAsc: boolean = false;
  confirmedAsc: boolean = false;
  deathAsc: boolean = false;


  sort = variable => {
    // we can access the value like this using square bracket
    console.log(this[`${variable}Asc`])
    // or you can remove Asc from suffix and access like `this[variable]`

    this.data[0] = {
      ...this.data[0],
      statewise: variable === 'state' // Alphabets needed to sort differently
        ? this.data[0].statewise.sort((a, b) => 
          this.stateAsc 
            ? (a.state > b.state ? -1 : 1) 
            : (b.state > a.state ? -1 : 1)
        )
        : this.data[0].statewise.sort((a, b) => 
            this[`${variable}Asc`] 
             ? a[variable] - b[variable] 
             : b[variable] - a[variable]
        )
    }
    // Change the boolean value
    this[`${variable}Asc`] = !this[`${variable}Asc`]
  }
}

Вот ссылка для кодов и ящиков

Answer 2

Может быть, вы можете использовать что-то вроде этого. Передайте также поле, которое вы хотите отсортировать.

Я не обработал значение isAscending. Я думаю, вы можете понять это.

sortDataByField(sortedDataBasedOnDate, fieldName, isAscending) {
      sortedDataBasedOnDate.forEach(item => item.statewise.sort(function (a, b) {
          return (a[fieldName] - b[fieldName]) * (isAscending ? 1 : -1);
      }));
}

sortDataByField(sortedData, 'confirmed', true);
sortDataByField(sortedData, 'active', true);
sortDataByField(sortedData, 'death', true);