In my Angular project, I am facing an issue while trying to display specific JSON data instead of the entire JSON object.
Scenario 1 :
import { Component, OnInit } from '@angular/core';
import { HttpService } from 'app/http.service';
import { Response } from '@angular/http/src/static_response';
@Component({
selector: 'app-httpapp',
template: `
<p>
httpapp Works!
<br><hr>
{{t_obj | json}}
</p>
<div *ngFor="let t of t_obj">
{{t.tname}}//not working
{{t}}
</div>
`,
})
export class HttpappComponent implements OnInit {
t_obj : T ;
constructor(private httpService : HttpService) { }
ngOnInit()
{
this.httpService.getData()
.subscribe(
(data : Response) => {
this.setData(data)
}
);
}
setData(response : Response)
{
this.t_obj = response.json();
console.log(response.json());
}
}//class
class T{
tname : string;
}
output:
[ { "t": "A" }, { "t": "B" }, { "t": "C" ] Case 2 :
Below is my REST controller :
@RequestMapping("/greeting")
public T greeting()
{
return new T("Done..!");
}
Angular code :
@Component({
selector: 'app-httpapp',
template: `
<p>
httpapp Works!
<br><hr>
{{t_obj.t}}
</p>
`,
})
export class HttpappComponent implements OnInit {
t_obj : any ;
constructor(private httpService : HttpService) { }
ngOnInit()
{
this.httpService.getData()
.subscribe(
(data : Response) => {
this.setData(data)
}
);
}
setData(response : Response)
{
this.t_obj = response.json();
console.log(response.json());
console.log(this.t_obj.t);
}
}//class
For case two i am getting the below error message :
EXCEPTION: Uncaught (in promise): Error: Error in ./HttpappComponent class HttpappComponent - inline template:3:14 caused by: Cannot read property 't' of undefined
Error: Error in ./HttpappComponent class HttpappComponent - inline template:3:14 caused by: Cannot read property 't' of undefined
After showing this error message it is printing the below lines :
{t: "Done..!"} Done..! So my question is, according to the error message if 't' is undefined then how it is being printed in console log.
Update : I got solution for case 1, i have to use {{t.t}}