Trying to access Django REST API in Angular2 - django

Question

I am working on a project where we use Angular2 and a Django backend that has a rest API. Right now we are simply just trying to get the django backend to send JSON objects to Angular2. For some reason when we make get requests, it comes back as blank. Right now we just have dummy test functions, but even those don't work.
/_services/user.service.ts
tempFunc() {
return this.http.get('http://localhost:8000/chains/', this.jwt()).map((model: Response) => model.json());
}
/temptemp-page.component.ts
import { Router } from '#angular/router';
import { UserService } from '../_services/user.service';
export class Temp {
name : string;
description : string;
slogan : string;
founded_date : string;
website : string;
}
#Component({
selector: 'app-temp-page',
templateUrl: './temp-page.component.html',
styleUrls: ['./temp-page.component.css']
})
export class TempPageComponent implements OnInit {
model: Temp;
constructor(
private router: Router,
private userService: UserService) { }
ngOnInit() {
this.model = {
name: 'Wrong',
description: 'Wrong',
slogan: 'Wrong',
founded_date: 'Wrong',
website: 'Wrong',
}
this.userService.tempFunc().subscribe(model => this.model = model);
console.log(this.model);
}
}
The Wrong is there just to know that if we get nothing, it will print Wrong and we know the get request isn't succeeding.
temp-page-componenent.html
<div style="margin-left: 20px;">
name: {{ this.model.name }} <br/>
description: {{ this.model.description }} <br/>
slogan: {{ this.model.slogan }} <br/>
founded_date: {{ this.model.founded_date }} <br/>
website: {{ this.model.website }} <br/>
<hr/>
</div>
The django backend has a model with field of the type above in this html file, in a table called Chains. at that URL specified. For some reason, every attempt to call it works. Except for Angular2, and I am asking this to figure out if there is just bad syntax, or something else related to the problem. I know it works because when I do
curl -g localhost:8000/chains/
It works fine and returns
[{"name":"Cafe Amazing","description":"Founded to serve the best sandwiches.","slogan":"The best cafe in the Mississippi!","founded_date":"2014-12-04T20:55:17Z","website":"http://www.thecafeamazing.com"}]
with a sucess code on the django server of 200 204.
However when I try the angular2 code above it returns the same codes but nothing gets displayed. What am I doing wrong here?

Answer 1

don't use this in your template use only the property name, like this :
<div style="margin-left: 20px;">
name: {{ model.name }} <br/>
description: {{ model.description }} <br/>
slogan: {{ model.slogan }} <br/>
founded_date: {{ model.founded_date }} <br/>
website: {{ model.website }} <br/>
<hr/>
</div>
you tempFunc is asynchronous so console.log(this.model) will be executed first :
this.userService.tempFunc().subscribe(model => this.model = model);
console.log(this.model);
do this :
this.userService
.tempFunc()
.subscribe(model =>{
this.model = model
console.log(this.model);
});