如何在 Angular Typescript 中的对象数组中提取对象的某些字段

Question

例如，我有一个 JSON 来自 JSONPlaceholder 网站的数据如下 https://jsonplaceholder.typicode.com/users.

[
  {
    "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"
    }
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv",
    "address": {
      "street": "Victor Plains",
      "suite": "Suite 879",
      "city": "Wisokyburgh",
      "zipcode": "90566-7771",
      "geo": {
        "lat": "-43.9509",
        "lng": "-34.4618"
      }
    },
    "phone": "010-692-6593 x09125",
    "website": "anastasia.net",
    "company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
    }
  }]

从这个对象数组中，我想要具有如下用户名和名称的对象数组：

[
{"name": "Leanne Graham",
    "username": "Bret"},
{    "name": "Ervin Howell",
    "username": "Antonette"
}
]

我正在使用 Httpclient 访问 JSON 数据。我在 app.component.ts 中的代码如下：

interface user {
      username : String,
    name : String
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  users : Observable<user>
  constructor(private _http : HttpClient){}
  name = 'Angular ' + VERSION.major;
  ngOnInit() {
   this.users = this._http.get('https://jsonplaceholder.typicode.com/users')

我正在 app.component.Html 中使用异步管道访问用户数组，如下所示：

<div *ngFor = "let user of users | async" >
 {{user.Username}}
 {{user.name}}
</div>

我已经尝试为整个 json 对象构建类型接口，并尝试使用 map 运算符进行过滤，但这对于大量 JSON 数据来说太多了。任何其他解决方案都会非常有帮助提前致谢。

Answer 1

map 运算符是必经之路。您正在寻求一种比 O(n) 复杂性更好的解决方案，但您总是必须以一种或另一种方式遍历整个对象数组，这意味着线性复杂性是您将获得的最小值。您始终可以使用常规 for 循环来迭代数据，然后推送到一个新数组，但这也会给您一些开销时间。

一个好的经验法则是，当您想要修改数组中的数据时，map 是正确的选择。

this.users = this._http.get('https://jsonplaceholder.typicode.com/users').pipe(
    map(users => users.map(user => ({ name: user.name, username: user.username })))
);

Answer 2

这是使用 map 运算符修改现有对象数组的示例代码。

将用户视为您的界面，即

interface user {
  username : String,
  name : String
}

let modifiedArray: Array<user> = this.users.map(user => {
  return <user>{
    username: item.username,
    name: item.name
  }
})

尝试 check/log modifiedArray & 让我知道它是否打印出您需要的内容。请分享您的反馈。

如何在 Angular Typescript 中的对象数组中提取对象的某些字段

How to extract certain fields of an object in an array of objects in Angular Typescript

object

observable

typescript

angular