How to get data from HTTP json in Angular

Question

kindly help I am trying to get Json data from HTTP link

<span class="subjectSpan">{{ title }}</span>

and the .ts file conatins

  constructor(public dialog: MatDialog, private api:ServiceUserService) {};
  title:any;
  ngOnInit() {
      this.title = this.api.apiCall().subscribe(data => {
      this.title = data;
    })
  }

and the .service.ts file has

apiCall() {
    return this.httpClient.get('https://jsonplaceholder.typicode.com/todos/1');
  }

I have imported HTTPCLIENTMODULE in module.ts and .ts file

Just the data from json is not showing just

[object object] is coming as result.

the json file contains

{"status":"success","results":2,"data":{"subject":[{"subject":"ART & HUMANITIES","numTitles":1,"slug":"art-humanities"},{"subject":"ANTHROPOLOGY","numTitles":1,"slug":"anthropology"}]}}

or getting this error

Element implicitly has an 'any' type because expression of type '"title"' can't be used to index type 'Object'.
  Property 'title' does not exist on type 'Object'.

Answer 1

As it was mentioned before it shows [Object object] because you are sending whole object.

If you want to see it works correctly change

<span class="subjectSpan">{{ title }}</span>

to

<span class="subjectSpan">{{ title | json }}</span>

If you want to get just one of the properties of the object then I would suggest to create interface for the object.

This way you can type variable title to correct object (having specified properties) and in template you can get whatever you want by for example {{title.success}}

Also I would suggest you to type the return value of the function. Change this

apiCall() {
return this.httpClient.get('https://jsonplaceholder.typicode.com/todos/1');

}

to

apiCall(): Observable<**interface you have created**>{
    return this.httpClient.get<**interface you have created**>('https://jsonplaceholder.typicode.com/todos/1');
  }

EDIT: It would be nice to assign data to variable only when they exist so in this case add condition in your subscription.

Answer 2

It is showing [Object object] in title because you are passing the whole json object to the title variable declared in the component, whereas you should be specifying the key in the received json Object. For example : In your json response you have "subject":"ART & HUMANITIES" json -> data -> subject -> 0th index -> subject

Therefore you might want to change the line this.title = data; to this.title = data['data']['subject'][0]['subject'];

also this.api.apiCall().subscribe(...) wont return title so remove that assignment.

Answer 3

{{ todos ? todos.id : "" }}

todos exist data then display data.

Typescript public todos : any;

value assign public varchar

todos = res;