Angular create object from API

Question

I am using Angular 8 and I am just trying to take the test JSON api from here: https://jsonplaceholder.typicode.com/users and create an array of User objects out of it like this:

export interface User {
   name: string;
   email: string;
}

I get the data with this:

 this.http.get('https://jsonplaceholder.typicode.com/users').subscribe(data => {
        this.data = data;
        console.log(data);
        });

And I am creating my data variable like this:

data: User[] = [];

It doesn't look like the data array is getting set. Do I need to loop through each object on the response and push it to the data array?

@AndreiRosu that only stores the entire data response, I only want to store an array of User objects in the data variable. — Nick
– Nick, Commented Oct 24, 2019 at 4:49
Then you need to map your data after you received it. learnrxjs.io/operators/transformation/map.html — Carsten
– Carsten, Commented Oct 24, 2019 at 4:54

vipul patel · Accepted Answer · 2019-10-24 05:24:00Z

2

There several ways to do the same:

one of them is : use map to iterate over data and return new object of type User

this.http.get('https://jsonplaceholder.typicode.com/users')
      .subscribe((data :any) => {
        this.users =  data.map((d: any) => {
          let user : User =  {name :d.name , email :d.email };
          return user;
        });
      });

demo

answered Oct 24, 2019 at 5:24

vipul patel

7504 silver badges10 bronze badges

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

Comments

tm2josep · Accepted Answer · 2019-10-24 04:51:09Z

2

Your API returns more than just the email and name:

{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "[email protected]",
    "address": {
        "street": "Kulas Light",
        "suite": "Apt. 556",
        "city": "Gwenborough",
        "zipcode": "92998-3874",
        "geo": {
            "lat": "-37.3159",
            "lng": "81.1496"
        }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
        "name": "Romaguera-Crona",
        "catchPhrase": "Multi-layered client-server neural-net",
        "bs": "harness real-time e-markets"
    }
}

So I would probably map your data to each property, so you know exactly what you're extracting from the output:

this.data = data.map((user: any): User => {
    return {
        name: user.name, 
        email: user.email
    }
});

answered Oct 24, 2019 at 4:51

tm2josep

6296 silver badges10 bronze badges

1 Comment

Nick Over a year ago

when trying to map the data from the API, I get error that property map does not exist on type Object

Collectives™ on Stack Overflow

Angular create object from API

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related