Angular 从 API 创建对象

Question

我正在使用 Angular 8，我只是想从这里获取测试 JSON api：https : //jsonplaceholder.typicode.com/users并从中创建一个 User 对象数组，如下所示：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;

        });

      });

Answer 2

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

{

    "id": 1,

    "name": "Leanne Graham",

    "username": "Bret",

    "email": "[e-mail]",

    "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

    }

});