FOSUserBundle User with Angular 4

Question

I'm working with Angular5 and Symfony2.8 ! What i wanted to do is to get all the users from FOSUserBundle Class from symfony to angular !

The symfony part works fine

The problem is with Angular part !

When i googled the error i found out that the retreived data (JSON from Symfony ) does not match the model class that i ve made in angular

this is the model class Marisupilami.ts (it represent 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();
  }
}

Component code html Affichage.component.html :

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 representation of FOSUserBundle class in angular ? or is there another way of doing this ?

Answer 1

change the function to

getUsers() {
    this._userService.getUsers()
      .subscribe(
        (data: Marisupilami[]) => {
             this.users = data
        },error=>{
            this.errorMessage = <any>error
        }
        )
      );
  }