title: Agular HTTP get request not retriving data to interface class object
body: <p>I want to retrieve data of teachers from teacher component through teacher id in URL.
  In list of Teacher first Teacher Data Shows But Other Teacher Data doesn't Show I don't Why..</p>
  <p>I have tried Console.log Data is shown in log for Every Teacher there.</p>
  <p>Teacher list
  <a href="https://i.stack.imgur.com/y9U6s.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>Teacher data for first teacher in List
  <a href="https://i.stack.imgur.com/dVVti.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>Teacher Data For Rest of Teachers
  <a href="https://i.stack.imgur.com/9C6g7.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>Here is my code of interface file</p>
  <pre><code>export interface Iteacherschedules{
      id : Number,
      teacher_id : Number,
      subject : string | null,
      class : string | null,
      timingfrom : string | null,
      timingto : string | null,
      duration : string | null
  }
  </code></pre>
  <p>//Code for teacherschedulte.service.ts</p>
  <pre><code>import { HttpClient } from '@angular/common/http';
  import { Injectable } from '@angular/core';
  import { Iteacherschedules } from '../teacherschedules/teacherschedules';
  import { Observable } from 'rxjs';
  
  @Injectable({
    providedIn: 'root'
  })
  export class TeacherschedulteService {
  
    private _url = 'http://127.0.0.1:8000/api/teacherschedule'
    constructor(private  http : HttpClient) { }
   
    list(id: number) : Observable&lt;any[]&gt;{
      var murl = this._url +'/'+id;
      return this.http.get&lt;any[]&gt;(murl);
    }
    update(teacherschedule : Iteacherschedules) : Observable&lt;Iteacherschedules&gt;{
      var mcurl = this._url +'/'+teacherschedule.id;
      return this.http.put&lt;Iteacherschedules&gt;(mcurl, teacherschedule);
  
    }
     
  
  
  }
  </code></pre>
  <p>Code for teacherschedules.component.ts file</p>
  <pre><code>import { Component, OnInit ,TemplateRef } from '@angular/core';
  import { TeacherschedulteService } from '../service/teacherschedulte.service'; 
  import { Iteacherschedules } from './teacherschedules'; 
  import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
  import { Observable, Subscription } from 'rxjs';
  import { FormControl } from '@angular/forms';
  import { ActivatedRoute } from '@angular/router';
  
  @Component({
    selector: 'app-teacherschedules',
    templateUrl: './teacherschedules.component.html',
    styleUrls: ['./teacherschedules.component.css']
  })
  export class TeacherschedulesComponent implements OnInit {
   
    modalRef?: BsModalRef;
    public ModalTitle = '';
    public selectedvalues = &lt;Iteacherschedules&gt;{};
    public btntitle = '';
    public classs = new FormControl('');
    public subject = new FormControl('');
    public teacher_id = 0;
    
   
    constructor(private route: ActivatedRoute, private modalService: BsModalService, private service:TeacherschedulteService ) { }
    
    openModal(template: TemplateRef&lt;any&gt; , teachersc:Iteacherschedules) {
      
        this.ModalTitle = &quot;Edit Teacher&quot;;
        this.selectedvalues = teachersc;
        this.btntitle = &quot;Update&quot;;
        this.classs.setValue(teachersc.class);
        this.subject.setValue(teachersc.subject);
       
      this.modalRef = this.modalService.show(template);
    }
  
    public teachersch = &lt;Iteacherschedules[]&gt;{};
  
    ngOnInit(): void {
        const id  = this.route.snapshot.paramMap.get('id');
        this.teacher_id  = +id;
        //alert(this.teacher_id);
        this.getteacherschedule(this.teacher_id); 
      
    }
  
    getteacherschedule(id: number){
      this.service.list(id)
      .subscribe(response =&gt; this.teachersch = response);
      console.log(this.teachersch);
      this.resetvalues();
   }
  
   save(){
    this.selectedvalues.class = this.classs.value;
    this.selectedvalues.subject = this.subject.value;
    this.service.update(this.selectedvalues).subscribe(_response =&gt; this.getteacherschedule(this.teacher_id));
      
  }
  
  resetvalues(){
    this.classs.reset();
    this.subject.reset();
  }
  
   
  }
  </code></pre>
  <p>and here is component.html file</p>
  <pre><code>&lt;div class=&quot;container mt-5&quot;&gt;
      &lt;h2 class=&quot; my-4&quot; &gt;Teacher Schedule&lt;/h2&gt;
      &lt;table class=&quot;table table-bordered&quot;&gt;
          &lt;thead&gt;
            &lt;tr&gt; 
              &lt;th scope=&quot;col&quot;&gt;Class&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Subject&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Timing&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Duration&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Action&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr *ngFor=&quot;let schedu of teachersch; index as i&quot; &gt;
              &lt;ng-container *ngIf=&quot;schedu.timingfrom == 'Break'; else simpleresult&quot;&gt;
                 
                &lt;td colspan=&quot;6&quot; class=&quot;text-center&quot;&gt;&lt;b&gt;Break / Teacher Meeting&lt;/b&gt;&lt;/td&gt;
                &lt;/ng-container&gt;
                &lt;ng-template #simpleresult&gt; 
              &lt;td&gt;{{ schedu.class}}&lt;/td&gt;
              &lt;td&gt;{{ schedu.subject }}&lt;/td&gt;
              &lt;td&gt;{{ schedu.timingfrom }} - {{  schedu.timingto }}&lt;/td&gt;
              &lt;td&gt;{{ schedu.duration }}&lt;/td&gt;
              &lt;td&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-primary mx-1&quot; (click)=&quot;openModal(template, schedu)&quot;&gt;Edit&lt;/button&gt;
               &lt;/td&gt;
              &lt;/ng-template&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
            &lt;td colspan=&quot;6&quot; class=&quot;text-center&quot;&gt;&lt;b&gt;OFF&lt;/b&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
  
  
            
   
  
            
          &lt;/tbody&gt;
        &lt;/table&gt;
        &lt;ng-template #template&gt;
          &lt;div class=&quot;modal-header&quot;&gt;
            &lt;h4 class=&quot;modal-title pull-left&quot;&gt;{{ModalTitle}}&lt;/h4&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn-close close pull-right&quot; aria-label=&quot;Close&quot; (click)=&quot;modalRef?.hide()&quot;&gt;
              &lt;span aria-hidden=&quot;true&quot; class=&quot;visually-hidden&quot;&gt;&amp;times;&lt;/span&gt;
            &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class=&quot;modal-body&quot;&gt;
              &lt;h3&gt; &lt;/h3&gt;
              &lt;form&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                    &lt;label for=&quot;teachername&quot;&gt;Class&lt;/label&gt;
                    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Class&quot; [formControl]=&quot;classs&quot;&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                    &lt;label for=&quot;qualification&quot;&gt;Subject&lt;/label&gt;
                    &lt;input type=&quot;text&quot; class=&quot;form-control&quot;  placeholder=&quot;subject&quot; [formControl]=&quot;subject&quot;&gt;
                  &lt;/div&gt;
                  
               &lt;button type=&quot;button&quot; class=&quot;btn btn-primary my-3&quot; (click)=&quot;modalRef?.hide();save()&quot;&gt;{{btntitle}}&lt;/button&gt;
                &lt;/form&gt;
          &lt;/div&gt;
        &lt;/ng-template&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Thanks in advance</p>