从 API 角度创建对象

Question

我正在使用 Angular 8，我只是想从这里获取测试 JSON api：https://jsonplaceholder.typicode.com/users 并从中创建一个用户对象数组，如下所示：

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

我用这个得到数据：

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

我正在像这样创建我的数据变量：

data: User[] = [];

看起来数据数组没有被设置。我是否需要遍历响应中的每个对象并将其推送到数据数组？

Answer 1

有几种方法可以做到这一点：

其中之一是：使用 map 遍历数据并返回 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

Answer 2

您的 API 返回的不仅仅是电子邮件和姓名：

{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "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"
    }
}

所以我可能会将您的数据映射到每个属性，这样您就可以确切地知道您从输出中提取了什么：

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