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

Question

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

NTP · Accepted Answer · 2019-02-08 11:47:28Z

2

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

answered Feb 8, 2019 at 11:47

NTP

4,4483 gold badges18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohammedsanaulla K · Accepted Answer · 2019-02-08 12:19:43Z

0

JS sorts the object based on key values

answered Feb 8, 2019 at 12:19

Mohammedsanaulla K

2813 silver badges4 bronze badges

Comments

Yaswanth · Accepted Answer · 2019-02-08 12:36:42Z

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; 
            }
        }
    }

Sulaiman Triarjo · Accepted Answer · 2019-02-08 11:30:29Z

-1

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
     }
     }
}

answered Feb 8, 2019 at 11:30

Sulaiman Triarjo

3435 silver badges15 bronze badges

3 Comments

Tarun Baraiya Over a year ago

I can not change API due to this is third party API call

Sulaiman Triarjo Over a year ago

have you tried this? ` <li *ngFor="let businesstime of detail['businesstime']"> {{businesstime.key}} {{detail['businesstime'][businesstime.key]['start'] }} - {{ detail['businesstime'][businesstime.key]['end'] }} Off Day </li> ` removing the | key and index

Tarun Baraiya Over a year ago

after removing | keyvalue its not working. it got blank html

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related