Newbie Help

Ionic Framework ionic-v3
#1

Hi folks, firstly let me thank you in advance for any assistance you may be able to give.

I’m just learning Ionic and i’m trying to build a basic App which pulls data from wp-json api.

which is hosted here https://ultrawebtemplates.com/demo/wp-json/wp/v2/listing

I’m trying to display business_hours and whilst the following code works, i’m sure there must be a cleaner, less bloated way of achieving it, but i am an absolute beginner so any direction would be greatly appreciated.

<div class="border-bottom" padding>
    <span ion-text color="dark" class="bold">OPENING HOURS</span>
    <ul class="highlight">
      <li>
        <span ion-text color="primary">MON {{ post.lp_listingpro_options.business_hours.Monday.open}} - {{ post.lp_listingpro_options.business_hours.Monday.close}}</span>
      </li>
      <li>
        <span ion-text color="primary">TUE {{ post.lp_listingpro_options.business_hours.Tuesday.open}} - {{ post.lp_listingpro_options.business_hours.Tuesday.close}}</span>
      </li>
      <li>
        <span ion-text color="primary">WED {{ post.lp_listingpro_options.business_hours.Wednesday.open}} - {{ post.lp_listingpro_options.business_hours.Wednesday.close}}</span>
      </li>
      <li>
        <span ion-text color="primary">THURS {{ post.lp_listingpro_options.business_hours.Thursday.open}} - {{ post.lp_listingpro_options.business_hours.Thursday.close}}</span>
      </li>
      <li>
        <span ion-text color="primary">FRI {{ post.lp_listingpro_options.business_hours.Friday.open}} - {{ post.lp_listingpro_options.business_hours.Friday.close}}</span>
      </li>
    </ul>
  </div>
#2

The only way to ‘clean up’ the template would be to do some data management once you got the data back from the service. You could condense the hours into a simpler structure, like this [{ dayName:‘Mon’, open: ‘8:00am’, close:‘6:00pm’ },…] then use *ngFor to loop over that array.

#3

Thanks for your response, it’s greatly appreciated, but a little bit over my head. Could you provide a little bit more information on how i would condense the hours ?

I’m assuming you mean at Wordpress level … Is there a way i can do this with a WP Function rather than editing the theme ?

#4