I am currently working on a project that involves Angular5 and Symfony2.8! My goal is to retrieve all the users from the FOSUserBundle Class in Symfony and display them in Angular.
The Symfony part is functioning correctly https://i.sstatic.net/Nos3W.png
However, I am encountering issues with the Angular implementation https://i.sstatic.net/KvKhu.png
Upon researching the error, I discovered that the retrieved JSON data from Symfony does not align with the model class I created in Angular
This is the model class Marisupilami.ts (which represents my FOSUserBundle Class in Symfony) :
export class Marisupilami {
constructor(
public id,
public username: string,
public username_canonical: string,
public email: string,
public email_canonical: string,
public enabled: boolean,
public password: string,
public last_login: string,
public roles: Array<any>,
public friends: Array< any >,
public race: string,
public famille: string,
public nourriture: string,
public age: string
) {}
}Marsipularmi-c.service.ts:
import { Injectable } from "@angular/core";
import { Http, Response, Headers } from "@angular/http";
import { Observable } from "rxjs";
import { Marisupilami } from "./Marisupilami";
import "rxjs/add/operator/catch";
import "rxjs/add/operator/map";
import "rxjs/add/observable/throw";
import "rxjs/add/operator/do";
@Injectable()
export class MarsipularmiCService {
constructor(private _http: Http) {}
private uri = "http://127.0.0.1:8000/Action/api/users";
getUsers(): Observable<Marisupilami[]> {
const headers = new Headers();
return this._http
.get(this.uri, { headers: headers })
.map(res => <Marisupilami[]>res.json())
.do(data => console.log("All: " + JSON.stringify(data)))
.catch(this.handelError);
}
private handelError(error: Response) {
return Observable.throw(error.json().errors || "server error");
}
}Component code ts Affichage.component.ts :
import { Component, OnInit } from "@angular/core";
import { Marisupilami } from "../Marisupilami";
import { MarsipularmiCService } from "../marsipularmi-c.service";
@Component({
selector: "app-affichage",
templateUrl: "./affichage.component.html",
styleUrls: ["./affichage.component.css"]
})
export class AffichageComponent implements OnInit {
users: Marisupilami[];
errorMessage: string;
constructor(private _userService: MarsipularmiCService) {}
getUsers() {
console.log("hello");
this._userService
.getUsers()
.subscribe(
(users: Marisupilami[]) => (
(this.users = users), error => (this.errorMessage = <any>error)
)
);
console.log(this.errorMessage);
console.log("in the get");
}
ngOnInit() {
this.getUsers();
}
}Hello Users
<h1 class="text-primary">Users </h1>
<div *ngFor="let p of users">
<div class="panel">
<br>
<br>
<br>
<div class="panel-header">
{{p.username}}
</div>
<div class="panel-body">
{{p.race}}
</div>
</div>
</div>Is there a specific way to represent the FOSUserBundle class in Angular? Or is there an alternative method to achieve this?