Заметка умеет сортировать данные по возрастанию / убыванию по ключу объекта в angular / typescript

Question

Я новичок в angular и пытаюсь создать приложение COVID 19 в angular, где у меня есть два компонента, State компонент и District компонент.

Компонент состояния выводит список всех состояний в таблице, и когда я нажимаю на любое состояние Это загружает весь список районов ниже этого состояния.

Вот моя рабочая ссылка: рабочая ссылка .

Ссылка на мои ожидания : ожидаемый результат ссылка

Я хочу отсортировать (переключить) данные моего района по определенному состоянию в порядке возрастания или убывания, когда я нажимаю на столбец Район таблицы, но не могу отсортировать данные в любом случае. Как только я смогу отсортировать по возрастанию, я могу написать то же самое по убыванию.

Я получаю error :

core. js: 6185 ERROR Ошибка типа: districtdata.sort не является функцией

Вот данные, которые я получаю как Json ответ для определенного состояния

данные. Json

{
  "Pune": {
    "confirmed": 63,
    "lastupdatedtime": "",
    "delta": {
      "confirmed": 0
    }
  },
  "Mumbai": {
    "confirmed": 198,
    "lastupdatedtime": "",
    "delta": {
      "confirmed": 0
    }
  },
  "Nagpur": {
    "confirmed": 12,
    "lastupdatedtime": "",
    "delta": {
      "confirmed": 0
    }
  },
  "Thane": {
    "confirmed": 10,
    "lastupdatedtime": "",
    "delta": {
      "confirmed": 0
    }
  },
  "Ahmadnagar": {
    "confirmed": 19,
    "lastupdatedtime": "",
    "delta": {
      "confirmed": 0
    }
  }
}

District.component.ts

 ngOnInit(): void {
    this.cs.districtdata.subscribe(data=>{
      this.districtdata=data
      console.log(data)
    })

  }

  sortDistrict(districtdata){
    this.isAscendingSort=true;
  const x= districtdata.sort((a, b) => a.localeCompare(b))
   console.log(x)
  }  

District.component. html

<div class="district-heading">
    <th (click)="sortDistrict(districtdata)">
        <div class="heading-content">
            <abbr class="dist" title="District">District</abbr>
        </div>
    </th>
    <th>
        <div class="heading-content">
            <abbr class="confirmed" title="Confirmed">Confirmed</abbr>
        </div>
    </th>
</div>

Answer 1

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

const districtData = {
/* your district data */
};

let newArr = [];
Object.keys(districtData).forEach((key, index) => {
 newArr.push(districtData[key]);
});

sort () - это функция для массивов (и, кроме того, вы не можете / не должны пытаться упорядочивать объекты или сделать предположения на основе их порядка.

РЕДАКТИРОВАТЬ: Этот код включает в себя stateName в объекте и сортирует новый массив на основе этого:

const districtData = {
  /* your district data */
};

let districtDataArray = [];
Object.keys(districtData).forEach((key, index) => {
  districtDataArray.push(
    Object.assign({}, { districtName: key }, districtData[key])
  );
});

compare = (a, b) => {
  return a.districtName.localeCompare(b.districtName);
};

districtDataArray.sort(compare);