title: Get list data api using angular4
body: <p>I am in problem with get api, here is <code>student_name</code> in api student. Here is my code I tried</p>
  
  <p>Api 
  <code>{
  "error": null,
  "result": 
  [{"id": 1, "student_name": "Alex" }, {"id":2, "student_name": "Bob"}]
  }</code></p>
  
  <p>Typescript: <code>student.service.ts</code></p>
  
  <pre><code>listStudent(){
      return this.http.get('api/student')
        .map(HttpHandle.extractData.bind(null, 'list student'))
        .catch(HttpHandle.handleError)
    }
  </code></pre>
  
  <p>extractDate method in http-handle.ts:</p>
  
  <pre><code>public static extractData(name: string, res: Response): Observable&lt;Response&gt; {
      if (res.status &lt; 300) {
        console.log(`%c# Response status ${res.status}, ${name}, ${res.arrayBuffer().byteLength} bytes`,
          'color: #00CC00; font-weight:bold;');
  
        if (printDetail) {
          console.groupCollapsed('\tResponse');
          console.log(`${JSON.stringify(res, null, 2)}`);
          console.groupEnd();
        }
      }
      else {
        console.log(`%c# Response status ${res.status}, ${name}, ${res.arrayBuffer().byteLength} bytes`,
          'color: #CC0000; font-weight:bold;');
        console.groupCollapsed('\tResponse');
        console.log(`${JSON.stringify(res, null, 2)}`);
        console.groupEnd();
      }
  
      return res.json();
    }
  </code></pre>
  
  <p>My Component: <code>student.component.ts</code></p>
  
  <pre><code>export class StudentComponent{
  lstStudent: string[];// I think something went wrong
  public student_name: string;
  ....
  constructor(
    private studentService: StudentService,
    ) { }
  ....
  getStudents(){
      this.studentService.listStudent()
        .subscribe(data =&gt;{
          this.lstStudent = data['lstStudent'];
          this.student_name = this.lstStudent...;//This is my issue 
        }
    );
    }
  </code></pre>
  
  <p>Html</p>
  
  <pre><code>&lt;select class="form-control" title="list Student"
                   [(ngModel)]="lstStudent" name="lstStudent"&gt;
   &lt;option *ngFor="let x of lstStudent" [ngValue]="x.student_name"&gt;{{x.student_name}}
   &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>So how to get <code>student_name</code> and use it for HTML in <code>select</code> tag.
  Thank you.</p>