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

例如，我有一个JSON数据，如下所示，来自JSONPlaceholder网站

从这个对象数组中，我想要一个包含用户名和名称的对象数组，如下所示：

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

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')

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

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

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

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')

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

用户界面{
用户名：String，
名称：String
}
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
用户：可观察
构造函数（私有的_http:HttpClient）{}
名称='Angular'+VERSION.major；
恩戈尼尼特（）{
this.users=this.\u http.get（'https://jsonplaceholder.typicode.com/users')

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

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

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')

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

{{user.Username}
{{user.name}

我曾经尝试过为整个json对象构建类型接口，并通过使用map操作符进行过滤，但对于大量json数据来说，这太难了。任何其他解决方案都会非常有用

---

提前感谢。

映射操作符是一个不错的选择。您要求的解决方案比

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 })))
);

---

下面是使用map操作符修改现有对象数组的示例代码

将用户视为您的界面，即

interface user {
  username : String,
  name : String
}

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

用户界面{
用户名：String，
名称：String
}
让modifiedArray:Array=this.users.map（user=>{
返回{
用户名：item.username，
名称：item.name
}
})

尝试检查/log修改Darray&如果它打印您需要的内容，请告诉我。

---

请分享您的反馈。

map

操作符是最简单的方法。为什么不按原样使用它呢？他正在寻找一个不同的解决方案，请再次阅读他的问题。@Daniel，您的解决方案在没有为JSON数据创建接口的情况下工作得非常好（尽管我们需要修改HTTP GET请求以实现此目的。_HTTP.GET）但是，我只想知道嵌套映射与单个映射有什么不同。例如：在上面的代码中，您已经使用了两次映射运算符。一次使用映射运算符时，它是如何发挥作用的？任何关于它的参考文档都会非常有帮助。不过，有一个很大的区别，我们同时使用RXJS

map

运算符或者，与

Array.map

函数不同，它们是不同的。由于

HttpClient

将返回一个可观察的数组作为其类型，因此它将以实体而不是实际内容的形式发出整个数组。它们的相似之处在于，它们返回一个新的数组/可观察的数组，以及每个已转换的元素。Actually我们正在处理HTTP请求，该请求将以可观察类型返回数据。我们需要使用“RXJS”中的映射运算符。由@Daniel提供的解决方案非常有效。请仔细研究。感谢您的回复，如果您需要修改来自HTTP请求的实际响应，这是正确的答案。但我的答案可以帮助您pful，以防您需要保留原始响应并根据其他用途的要求进行修改。这样，您将获得原始响应和修改的数组/对象。很高兴看到您的问题得到解决。感谢您的反馈。