Angular calling API with observable is not displaying data - json

Question

I have implemented an angular 5 application to bring data from a Web API. I am using an observable to get the json. The Json coming from the API looks like this:
{
"Job": [
{
"Title": "Solution Architect",
"Summary": "Solution Architect",
"Salary": {
"MinValue": "100",
"MaxValue": "100",
"Text": "",
"Period": "HourlyRate"
},
"Reference": "234483_1",
},
{
"Title": "Senior Business Analyst – eCommerce ",
"Summary": "Senior Business Analyst...",
"Salary": {
"MinValue": "80",
"MaxValue": "100",
"Text": "",
"Period": "HourlyRate"
},
"Reference": "234874_1",
}
],
"Advertiser": "Resourcing",
"Source": "Wiz"
}
I have created a service looks as follows:
....
#Injectable()
export class AdvDataService {
private _getAddsUrl = 'https://xx.xxxx.com/v1/adverts/www111';
constructor(private _http: Http) { }
getAdvForClient(): Observable<IAdv> {
return this._http.get(this._getAddsUrl)
.map((response: Response) => <IAdv>response.json())
.do(data => console.log('All:' + data))
.catch(this.handleError);
}
The component looks like that:
....
export class HomeComponent implements OnInit {
constructor(private _sdvDataService: AdvDataService) { }
private loadAdverts: IAdv;
private errorMesage: string;
ngOnInit() {
this.errorMesage = "";
this._sdvDataService.getAdvForClient()
.subscribe(adv => {
this.loadAdverts = adv;
console.log ("here:" + this.loadAdverts)
}, error => {
this.errorMesage = <any>error;
});
}
}
I have a simple interface:
export interface IAdv {
Advertiser: string,
Source:string
}
and my html:
<div *ngIf="loadAdverts" >
<div class="row justify-content-center">
<div class="card" style="width: 20rem;">
<div class="card-body">
<h4 class="card-title">here: {{loadAdverts.Advertiser}}</h4>
<h6 class="card-subtitle mb-2 text-muted">{{loadAdverts.source}} </h6>
<p class="card-text">{{loadAdverts.source}}</p>
Card link
Another link
</div>
</div>
</div>
I can see the json displayed in the console from both console.log in the component and in the service but any data is displayed in the view.
I would appreciate any help?
Update: It seems the json coming from the server is a json string. So it is not being parsed in the observable. I had to use json.parse in the suscriber. How can I parse that json string to a json object automatically with the suscriber?

Answer 1

Your loadAdverts is a private variable and thus not accessible in the template.
Either make it public like this.
public loadAdverts:IAdv;
or use getters and setters.
private _loadAdverts:IAdv;
....
get loadAdverts(): IAdv {
return this._loadAdverts;
}
set loadAdverts(_ad: IAdv) {
this._loadAdverts = _ad;
}
....

Answer 2

As we can see, you are receiving an Object Job containing an array, so you should extract that array from the object:
getAdvForClient(): Observable<IAdv> {
return this._http.get(this._getAddsUrl)
.map((response: Response) => <IAdv>response.json().Job) // here!
.do(data => console.log('All:' + data))
.catch(this.handleError);
}
also, since you are getting an array, you would want to iterate that in your template:
<div *ngFor="let adv of loadAdverts">
<p>{{adv.Source}}</p>
<!-- more code here -->
</div>
also notice that this is case sensitive, in your template you used source as the property name instead of Source.