title: Angular, Typescript accessing nested model as array
body: <p>trying to access the child member(is an array) of parent interface.
  But getting <code>undefined</code>.</p>
  
  <pre><code>export class Address {
      id: number;
      city: string;
      state: string;
  }
  
  import { Address } from './address';
  export class User {
      id: number;
      name: string;
      alladdresses: Address[];
  }
  </code></pre>
  
  <p>in my component - the declaration are</p>
  
  <pre><code>  users: User[] = [];
    address: Address[] = [];
  </code></pre>
  
  <p>and my <code>http.get</code> is</p>
  
  <pre><code>    selectUser(user: User) {
      let url = "http://localhost:8080/users/" + user.id
      this.http.get&lt;User&gt;(url).subscribe(
  
        res =&gt; {
          //console.log(res);
          this.selectedUser = res;
          console.log('selected user is:', this.selectedUser);
  
        },
        error =&gt; {
          console.log('error while getting user for ', user.id);
        },
        () =&gt; {
          console.log('complete');
        }
      );
    }
  </code></pre>
  
  <p>and the json response of user is
  <a href="https://i.stack.imgur.com/453tH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/453tH.png" alt="enter image description here"></a></p>
  
  <p>here the selected user I am displaying on the page, and some action on page calling another function to access the addresses - the array</p>
  
  <pre><code>createAddress() {
      let newAddress: Address = {
        id: null,
        city: "new city",
        state: "new state"
      }
      console.log(this.selectedUser)
      let address: Address[] = this.selectedUser.alladdresses
      //address.push(newAddress);
      console.log(address);
    }
  </code></pre>
  
  <p>But the array is undefined, not where waht going wrong.
  <a href="https://i.stack.imgur.com/mmdgE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mmdgE.png" alt="enter image description here"></a></p>