title: How to bind data from JSON response into Dropdown List Angular2?
body: <p>I want to bind data that I received from my web server into my front end application however the data is showing up as undefined. The array itself is taking the number of objects available, and data is binding to the component but not the front end itself</p>
  
  <p>Here is my Template:</p>
  
  <p>form.component.html</p>
  
  <pre><code>    &lt;label&gt;Group ID&lt;/label&gt;
        &lt;div class="row" *ngIf="roles.length"&gt;
          &lt;div class="col-md-4"&gt;
      &lt;select [(ngModel)]="roles" name="group_id" class="form-control" [formControl]="complexForm.controls['group_id']" data-width='200px'&gt;
      &lt;option *ngFor="let role of roles" [value]="role.id"&gt;  
      {{role.name}}
      &lt;/option&gt;
      &lt;/select&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>The data looks like this, I'm supposed to display the name based on the value</p>
  
  <pre><code>export class Group {
  id: string;
  name: string;
  pwd_expiry_in_days: string;
  }
  </code></pre>
  
  <p>My component looks like this, data is being received and I'm able to log the data perfectly within the component</p>
  
  <pre><code>  public roles: Array&lt;Group&gt; = [];
    currentGroup : Group;
  
  
     private getGroups() : Observable&lt;any&gt; {
      console.log("In Groups");
      let _url = "myURL";
      let headers = new Headers();
      headers.append('X-User', sessionStorage.getItem('username'));
      headers.append('X-Token', sessionStorage.getItem('token'));
      headers.append('X-AccessTime', sessionStorage.getItem('AccessTime'));
      headers.append('Content-Type', 'application/json');
      let options = new RequestOptions({ headers: headers });
  
      return this.http.get(_url, options)
      .map(response =&gt; {
        var responseAsObject = response.json();
        console.log(responseAsObject); &lt;--- Good response
        return responseAsObject;
      });
  }
  
  
  ngOnInit(){
    this.getGroups().subscribe(roles =&gt; { 
      this.roles = roles;
      console.log(this.roles); &lt;--- Logs perfectly fine
    });
  }
  </code></pre>
  
  <p>Now that I have <strong>this.roles</strong> containing my array of JSON objects to display to the front end, why is it failing to display them based on what I have in my template?</p>
  
  <p>thank you!</p>