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

CC BY-SA 4.0
2020-01-07T22:04:28.507Z
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
CC BY-SA 4.0
2020-01-07T20:07:05.430Z
2020-01-07T20:07:05.430Z
Trish20
<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>

CC BY-SA 4.0
2020-01-07T19:26:47.563Z
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
CC BY-SA 4.0
2020-01-07T19:32:55.787Z
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
<craft3><headless><graphql>
How to loop through Craft CMS query in Angular
# 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:


   {{ entry.pageTitle }}
   {{ entry.description }}
   {{ entry.keywords }}
   {{ entry.canonical }}
    
   {{ entry.topBanner }}



How can I get entries.imageHero.heroTitle for instance?
The data return looks like the following when I console.log this query:

**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:   
    
    {{ obj.heroTitle }}
  

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.  

---

