Answers.Body: <p>Got it working like this:   </p>
  
  <pre><code>  &lt;ng-template ngFor let-obj [ngForOf]="entry.imageHero"&gt;  
      &lt;h1&gt;{{ obj.heroTitle }}&lt;/h1&gt;
    &lt;/ng-template&gt;
  </code></pre>
  
  <p>This also works: </p>
  
  <pre><code>{{ entry.imageHero[0].heroTitle }}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-01-07T22:04:28.507Z
Answers.Text: 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.
Answers.UserDisplayName: August Miller
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-01-07T20:07:05.430Z
Answers.LastActivityDate: 2020-01-07T20:07:05.430Z
Answers.UserDisplayName: Trish20
Body: <p>Given the following query sample, how can I loop through the entries past the first array in Angular?</p>
  
  <p>Here is the query sample:</p>
  
  <pre><code>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         
        }
      }
     }
    }
  }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;div *ngFor="let entry of entries | async "&gt;
  
     &lt;h1 class="title"&gt;{{ entry.pageTitle }}&lt;/h1&gt;
     &lt;p&gt;{{ entry.description }}&lt;/p&gt;
     &lt;p&gt;{{ entry.keywords }}&lt;/p&gt;
     &lt;a href="{{ entry.canonical }}"&gt;{{ entry.canonical }}&lt;/a&gt;
     &lt;p class="banner" style="background-color:blue; padding:5px;color:#fff;"&gt; 
     &lt;strong&gt;{{ entry.topBanner }}&lt;/strong&gt;&lt;/p&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I get entries.imageHero.heroTitle for instance?</p>
  
  <p>The data return looks like the following when I console.log this query:</p>
  
  <p><a href="https://i.sstatic.net/kP7uM.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/kP7uM.png" alt="enter image description here"></a></p>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-01-07T19:26:47.563Z
Comments.Text: 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.
Comments.UserDisplayName: andrew.welch
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-01-07T19:32:55.787Z
Comments.Text: 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
Comments.UserDisplayName: Trish20
Tags: <craft3><headless><graphql>
Title: How to loop through Craft CMS query in Angular
ThreadText: # How to loop through Craft CMS query in Angular
  
  (Asked by: username_0 on 2020-01-07)
  
  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](https://i.sstatic.net/kP7uM.png)](https://i.sstatic.net/kP7uM.png)
  
  **Tags:** craft3, headless, graphql
  
  > **Comments:**
  > **username_1**: 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.  
  > **username_0**: 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  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_0 on 2020-01-07. Score: 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 }}
  
  ```
  
  > **Comments:**
  > **username_2**: 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.  
  
  ---
  
  