CODEWITHSUNDEEP
angular
Tarun Baraiya
Tarun Baraiya

Reputation: 504

Angular 7 : Display data from API got sorted by Assending order in HTML

I am new to Angular and I am using Angular 7

I call api and get data to display in html. Data is about business time is like:

"data": {
    "businesstime": {
      "Monday": {
        "start": "09:00 am",
        "end": "07:00 pm",
        "is_off": false
      },
      "Tuesday": {
        "start": "09:00 am",
        "end": "07:00 pm",
        "is_off": false
      },
      "Wednesday": {
        "start": "09:00 am",
        "end": "07:00 pm",
        "is_off": false
      },
      "Thursday": {
        "start": "09:00 am",
        "end": "07:00 pm",
        "is_off": false
      },
      "Friday": {
        "start": "09:00 am",
        "end": "07:00 pm",
        "is_off": false
      },
      "Saturday": {
        "start": "11:25 am",
        "end": "05:20 pm",
        "is_off": false
      },
      "Sunday": {
        "start": "09:00 am",
        "end": "04:00 pm",
        "is_off": true
      }
    }
  }

in my html I try to display like this :

<ul class="listar-openinghours">
                    <li *ngFor="let businesstime of detail['businesstime'] | keyvalue ; let day=index">
                      <span>{{businesstime.key}}</span>
                      <span  *ngIf="detail['businesstime'][businesstime.key]['is_off'] == '0' " >  {{detail['businesstime'][businesstime.key]['start'] }}  - {{  detail['businesstime'][businesstime.key]['end'] }} </span>
                      <span  *ngIf="detail['businesstime'][businesstime.key]['is_off'] == '1' " >  Off Day </span>
                    </li>

                  </ul>

My Problem is data is not looping dispaly as order of API data it dispaly like :

Friday 09:00 am - 07:00 pm
Monday 09:00 am - 07:00 pm
Saturday 11:25 am - 05:20 pm
Sunday Off Day
Thursday 09:00 am - 07:00 pm
Tuesday 09:00 am - 07:00 pm
Wednesday 09:00 am - 07:00 pm

HOW I can display data from Monday as API key Order ?

it must be like : 

Monday 09:00 am - 07:00 pm
Tuesday 09:00 am - 07:00 pm
....
Sunday Off Day

it bust be display same as API order like start from Monday

Upvotes: 1

Views: 944

Answers (4)

Yaswanth
Yaswanth

Reputation: 69

It is good if we have fewer computations on the HTML part

HTML

<ul class="listar-openinghours">
    <li *ngFor="let businesstime of givenArray; let day=index">
        <span *ngIf="!businesstime.is_off">{{businesstime.day}} {{businesstime.start}} - {{businesstime.end}}</span>
        <span *ngIf="businesstime.is_off">{{businesstime.day}} Off Day</span>
    </li>

</ul>

ts

    const expectedFormatData = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday","Saturday","Sunday"];
    var size = Object.keys(this.data.businesstime).length;
    for (let property in this.data.businesstime) {
        for (let index = 0; index < expectedFormatData.length; index++) {
            if (expectedFormatData[index] === property) {
              this.givenArray.push(this.data.businesstime[property]);
              console.log(property);
              this.givenArray[this.givenArray.length - 1].day = property; 
            }
        }
    }

Upvotes: 0

Mohammedsanaulla K
Mohammedsanaulla K

Reputation: 281

JS sorts the object based on key values

Upvotes: 0

NTP
NTP

Reputation: 4448

As far as I remember (I may remember wrong) angular uses alphabetical sort for objects key.

What you can do is to create a days array and loop through it instead of your object.

ts

  days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday","Saturday","Sunday"];

html

<ul class="listar-openinghours">
  <li *ngFor="let day of days; let day=index">
    <span>{{day}}</span>
        <span  *ngIf="data['businesstime'][day]['is_off'] == '0' " >  {{data['businesstime'][day]['start'] }}  - {{  data['businesstime'][day]['end'] }} </span>
    <span  *ngIf="data['businesstime'][day]['is_off'] == '1' " >  Off Day </span>
</ul>

Demo

Upvotes: 2

Sulaiman Triarjo
Sulaiman Triarjo

Reputation: 343

i thinks it is looping according your key. i suggestion if your key is ascending. And then you add filed day with value the day. e.g

"data": {
    "businesstime": {
     "1313": {
        "day"   : "wednesday",
        "start" : "09:00 am",
        "end"   : "07:00 pm",
        "is_off": false
     },
     "1314":{
        "day"   : "thursday",
        "start" : "09:00 am",
        "end"   : "07:00 pm",
        "is_off": false
     }
     }
}

Upvotes: -1

Related Questions