Problem in displaying data in template in Angular

Question

After fetching data from Django server I want to display it in Angular, I used :

 <p>
  {{todo.id}}
</p>

and without any errors, I do not see the data in my template, the above code wants to display the value of id in a JSON.

service:

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private http: HttpClient) {

  }
  private URL="http://127.0.0.1:8000/api/product/"
  getApi(arg:any){
    console.log(arg);
    return this.http.get (this.URL)
    .subscribe(data=> {
      console.log('we got',data)
    })
    console.log(arg);
    
  }
  
}

component:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

})
export class AppComponent {
   
  title = 'angpr';
  todo:any;

  constructor(public api: ApiService) {

    

  }

 ngOnInit(): void{
  this.todo=this.api.getApi('hey');

 }

}

Why can't I see the data in template and what should I do to display it in the template?

Don’t subscribe in your service, just return the observable and subscribe in the component. — MikeOne
– MikeOne, Commented Jun 20, 2022 at 17:30

Charlie V · Accepted Answer · 2022-06-20 17:30:58Z

1

In your TS file you assign this.todo to the result of this.api.getApi(), however the result of that function is a subscription and not data that comes from subscribing.

You can rewrite this to:

service.ts:

getApi(arg:any):Observable<any>{
    console.log(arg);
    return this.http.get (this.URL)    
}

And in your component.ts:

this.api.getApi('hey').subscribe(
   result => this.todo = result
)

In this way your service is responsible for interacting with the backend and your view is responsible for assigning the data from the service to the correct attributes in your component.

Hope this helps.

PS. You don't use the arg parameter in the function.

answered Jun 20, 2022 at 17:30

Charlie V

1,0501 gold badge10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Problem in displaying data in template in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related