Fetching Array of Data from Backend with Angular 9

Question

I need a little bit help with Angular (9). I do a GET Request to fetch a list of Users from the Backend:

    getUsers() {
    return this.http.get<User[]>(`${this._constant.baseAppUrl}/users/all`, )
        .pipe(map(user => {

            return user;
        }));
    }

My Goal is to get an Array of Objects with a type of the User Model. Instead I get an object.

I don't understand why. My IDE also shows, that the user variable is User[], but in the browser the typeof user is "object".

So how can I get an array back?

EDIT: This is the Answer from the Backend:

{
   "5ea04cfbcd595b393d78acbb": {
      "isAdmin": true,
      "role": "User",
      "status": "cEmail",
      "_id": "5ea04cfbcd595b393d78acbb",
      "name": "Test",
      "password": "$2b$10$re0gqblgXsfYus1mYA3yQ.Oiz4x81c3M2uxfE4tG6V7tNW1JMubXi",
      "email": "[email protected]",
      "__v": 0
   },
   "5ea1f308fc8909618668384e": {
      "isAdmin": true,
      "role": "User",
      "status": "cEmail",
      "_id": "5ea1f308fc8909618668384e",
      "name": "Mathias Braun",
      "password": "$2b$10$zpQezfiG4xNkwOTgV4CLIeYU4MITVfL2VhlLC3rqCbjBGl5TIpavG",
      "email": "[email protected]",
      "__v": 0
   }
}

Are u subscribing your result from return of GetUsers() method? — Cagri Tacyildiz
– Cagri Tacyildiz, Commented Apr 23, 2020 at 22:06
this.http.get<User[]> <--This is saying get an array. But obviously, the back end is not returning an array. Right? — JWP
– JWP, Commented Apr 23, 2020 at 23:10
Thank you for your Comments, I updated my previous posting with the answer of the API — user39063
– user39063, Commented Apr 24, 2020 at 5:13

Sumit Kumar · Accepted Answer · 2020-04-24 05:58:56Z

1

The backend is not returning the Array according to your provided JSON. But you can convert the object into the Array on the Angular side using the following way.

Modify your Api call function

getUsers():Observable<User[]> {
   return this.http.get<User[]>(`${this._constant.baseAppUrl}/users/all`, )
    .pipe(map(response=> {
       if(response){
          return Object.values(response); //This will return the array of object values.
        }
        return []; // If response is null return empty array for safety.
    }));
}

Now your getUsers() function will array of user object.

answered Apr 24, 2020 at 5:58

Sumit Kumar

2492 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Fetching Array of Data from Backend with Angular 9

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related