title: Accessing Navigation Property in Type Script
body: <p>I have web api(/api/Category?includeProducts=true) which includes categories and products(navigation property) when called</p>
  <pre><code>export class Category {
      categoryID!: number;
      categoryName!: string;
      description!: string;
      picture!: any;
      products!: Product[];
  }
  
  export class Product {
          productID!: number;
          productName!: string;
          supplierID!: number;
          categoryID!: number;
  }
  </code></pre>
  <p>when I call the api it fills the json data in this public categories: Category[] = [];</p>
  <p>How can I fill  the products in   public products: Product[] = []; from categories property.</p>
  <p>I have tried this code but it doesn't return</p>
  <pre><code>this.categories.forEach(function(element){(
    console.log(elements.products);
    )})  
  
           
  </code></pre>
  <p>Edit: Data from the API</p>
  <pre><code>[
    {
  &quot;categoryID&quot;: 1,
  &quot;categoryName&quot;: &quot;Beverages&quot;,
  &quot;description&quot;: &quot;Soft drinks, coffees, teas, beers, and ales&quot;,
  &quot;products&quot;: [
    {
      &quot;productID&quot;: 1,
      &quot;productName&quot;: &quot;Chai&quot;,
      &quot;supplierID&quot;: 1,
      &quot;categoryID&quot;: 1,
      &quot;quatityPerUnit&quot;: null,
      &quot;unitPrice&quot;: 18,
      &quot;unitsInStock&quot;: 39,
      &quot;unitsOnOrder&quot;: 0,
      &quot;recordLevel&quot;: 0,
      &quot;discontinued&quot;: false
    },
    {
      &quot;productID&quot;: 2,
      &quot;productName&quot;: &quot;Chang&quot;,
      &quot;supplierID&quot;: 1,
      &quot;categoryID&quot;: 1,
      &quot;quatityPerUnit&quot;: null,
      &quot;unitPrice&quot;: 19,
      &quot;unitsInStock&quot;: 17,
      &quot;unitsOnOrder&quot;: 40,
      &quot;recordLevel&quot;: 0,
      &quot;discontinued&quot;: false
    },
  </code></pre>
  <p>}
  ]</p>
  <p>The 's' was typo error sorry about that.</p>
  <p>The data retrieved from api is being stored in <code>public categories: Category[] = [];</code></p>
  <p>Here is the HTTP Request <code>getData(): Observable&lt;Category[]&gt; { return this.http.get&lt;Category[]&gt;(&quot;/api/Category?includeProducts=true&quot;).pipe(retry(3), delay(3000)); }</code></p>
  <p>And here I am filling up the Categories where each category has multiple products inside</p>
  <pre><code>this.productstore.getData().subscribe(
          (data: Category[]) =&gt; {
              if (data == null) {
                  this.statusmeassge = &quot;No products found&quot;;
              }
              else {
                  this.loading = false,
                      this.categories = data;
              }
          }, (error) =&gt; { console.log(error), this.loading = false });   
  </code></pre>
  <p>I am trying to fill Product[] using like <code>this.categories.Products</code></p>