how can i sort data in month-CodePudding

i have a function that maping integer to month label

// Get month label
  getMonthName(monthNumber: any): string {
    var tempMonth: string;
    let monat = [
      { id: 1, title: 'Januari' },
      { id: 2, title: 'Februari' },
      { id: 3, title: 'Maart' },
      { id: 4, title: 'April' },
      { id: 5, title: 'Mei' },
      { id: 6, title: 'Juni' },
      { id: 7, title: 'Juli' },
      { id: 8, title: 'Aout' },
      { id: 9, title: 'Sept' },
      { id: 10, title: 'Oct' },
      { id: 11, title: 'Nov' },
      { id: 12, title: 'Dec' },
    ];
    monat.forEach((yue) => {
      if (yue.id === monthNumber) {
        tempMonth = yue.title;
      }
    });
    return tempMonth;
  }

and then i call it from this function

// Get the data from service
  getConso() {
    this.consosrv.getConso().subscribe((tempo: Conso[]) => {
      this.TheConso = tempo;

      //Group data in month
      const groups = this.TheConso.reduce((groups, donne) => {
        const month = new Date(donne.date_achat).getMonth()   1;
        const MM = this.getMonthName(month);

        if (!groups[MM]) {
          groups[MM] = [];
        }
        groups[MM].push(donne);
        return groups;
      }, {});

      //Mapping data to array
      this.groupArrays = Object.keys(groups).map((mois) => {
        return {
          mois,
          sum: groups[mois].reduce((a, b) => a   parseInt(b.food_prix), 0),
          donnes: groups[mois].sort(
            (objA, objB) =>
              new Date(objA.date_achat).getTime() -
              new Date(objB.date_achat).getTime()
          ),
        };
      });
    });
  }

if i use

const month = new Date(donne.date_achat).getMonth()   1;

it work, it sort in integer.

but i want to sort in alphabet

const MM = this.getMonthName(month);

i implemented your code but it not quite work:

CodePudding user response：

If I understand correctly and you want to sort the groupArrays list by month name, you can do it like so:

 this.groupArrays = Object.keys(groups).map((mois) => {
        return {
         ...
        };
      }).sort((a, b) => a.mois.localCompare(b.mois))

As a side note, there are cleaner ways to get the name of the month. For example you can use the function used by date pipe (formatDate) imported from @angular/common or if you're using a library like date-fns:

format(new Date(), 'MMMM', { locale: de })

Also, I would suggest avoiding manual subscriptions and going for the async pipe.

EDIT

To answer your question from below, if you want to use the month as an integer and display the corresponding month label you can create a custom pipe.

Let's say that your object looks something like this:

{
  monthId: 1,
  sum: ...,
  dones: ...
}

Your pipe will be:

// be careful here, if you use the JS month number, you need to start
// indexing from 0
// Ex: 0 month is January
const dictionary: Record<number, string> = {
  1: "Januari",
  2: "Februari",
  3: "Maart",
  4: "April",
  5: "Mei",
  6: "Juni",
  7: "Juli",
  8: "Aout",
  9: "Sept",
  10: "Oct",
  11: "Nov",
  12: "Dec"
};
@Pipe({
  name: "monthLabel"
})
export class MonthLabelPipe implements PipeTransform {
  transform(value: number): string {
    return dictionary[value];
  }
}

And you'll use it something like:

<span>{{ payload.monthId | monthLabel }}</span>

I hope that helps you.