1

Given the following query sample, how can I loop through the entries past the first array in Angular?

Here is the query sample:

query sample ($section: [String], $type: [String], $slug: [String]) {
entries (section: $section, type: $type, slug: $slug) {
... on sections_sample_Entry {
  pageTitle
  description
  keywords
  canonical
  topBanner
  imageHero {
    ... on imageHero_ImageHeroData_BlockType {
      backgroundImage {
        title
        url
        ... on images_Asset {
         altText
       }
      }
      seal {
        title
        url
        ... on images_Asset {
         altText
       }
      }
      heroTitle
      supertitle
      subtitle
      heading
      bullets
      ctaButton         
      }
    }
   }
  }
}

In the Angular template, I'm able to get and display the content within entries before the imageHero, anything after imageHero I have not been able to figured how to loop:

<div *ngFor="let entry of entries | async ">

   <h1 class="title">{{ entry.pageTitle }}</h1>
   <p>{{ entry.description }}</p>
   <p>{{ entry.keywords }}</p>
   <a href="{{ entry.canonical }}">{{ entry.canonical }}</a>
   <p class="banner" style="background-color:blue; padding:5px;color:#fff;"> 
   <strong>{{ entry.topBanner }}</strong></p>

</div>

How can I get entries.imageHero.heroTitle for instance?

The data return looks like the following when I console.log this query:

enter image description here

  • Did you try {{ entry.imageHero.heroTitle }}? In cases like this, I think the easiest thing to do is console.log the information (in this case console.log(entry)) to see what format the data is coming in as. – andrew.welch Jan 7 at 19:26
  • Hi Andrew, thanks for your quick response, yes I did try that and it is not returning anything. I just added the return entry from console.log – Trish20 Jan 7 at 19:32
2

Got it working like this:

  <ng-template ngFor let-obj [ngForOf]="entry.imageHero">  
    <h1>{{ obj.heroTitle }}</h1>
  </ng-template>

This also works:

{{ entry.imageHero[0].heroTitle }}
| improve this answer | |
  • Just noting that the reason for this is due to Craft's handling of relational fields—any relation is technically a one-to-many, so the results will always be an array. If you've limited the field to a single relation, you can usually use the [0] syntax to grab the first one, but if you're unsure how many are attached, your first snippet is the way to go. – August Miller Jan 7 at 22:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.