如何仅提取json的某些属性，使用rxjs作为可观察的返回

问题描述

例如，这是我正在接收的json

{
    "events": [...
    ],"total": 12341,"students": [
        {
            "id": 1,"first_name": "John","last_name": "Apple"
        },{
            "id": 2,"first_name": "Bob","last_name": "Banana"
        },{
            "id": 3,"first_name": "Charles","last_name": "Carrot"
        }
    ]
}

我想将数据转换为以下形式，并以可观察的形式返回

[
    {
        "first_name": "John","last_name": "Apple"
    },{
        "first_name": "Bob","last_name": "Banana"
    },{
        "first_name": "Charles","last_name": "Carrot"
    }
]

我尝试了以下操作，但返回的结果未定义。

getStudentsName(): Observable<any> {
    const requestUrl = this.rootURL + `students/`;
    let studentsInfo = this.http.get<any>(requestUrl).pipe(map(o => o.students));
    return studentsInfo.pipe(map(students => {students.first_name,students.last_name}));
  }

订阅可观察值时返回未定义

this.getStudentsInfoService.getStudentsName()
      .subscribe((result) => console.log('here',result));

解决方法

似乎找不到students。试试这个：

return studentsInfo.pipe(map(s => { return {
  first_name: s.first_name,last_name: s.last_name,}}));

,

这是一个简短的代码段。

const object = {
    "total": 12341,"students": [
        {
            "id": 1,"first_name": "John","last_name": "Apple"
        },{
            "id": 2,"first_name": "Bob","last_name": "Banana"
        },{
            "id": 3,"first_name": "Charles","last_name": "Carrot"
        }
    ]
}

let arr: any = [];
object.students.forEach(person => arr.push(
    {
        "first_name": person.first_name,"last_name": person.last_name
    }))

console.log(arr)


    [LOG]: [{ "first_name": "John","last_name": "Apple" },{ "first_name": "Bob","last_name": "Banana" },{ "first_name": "Charles","last_name": "Carrot" }] 

您可以使用foreach循环遍历学生，然后创建一个新的json，然后将其放入新数组中

this.http.get<any>(requestUrl).pipe(map(o => o.students.foreach(person => arr.push({
...}));

,

问题

问题在于您如何返回可观测的

让我们分解代码

let studentsInfo = this.http.get<any>(requestUrl).pipe(map(o => o.students));

在上面的studentsInfo中，类型为Observable<any>

下一行如下所示

return studentsInfo.pipe(
  map(students => {
    students.first_name,students.last_name
  }
));

让我们看看下面的部分

{
  students.first_name,students.last_name
}

本节的这一部分实际上没有没有return语句，因此默认情况下javascript返回undefined！

解决方案

要使用没有return语句的箭头功能，您需要将{}包裹在()中，如下所示

students => ({ })

下面将起作用

getStudentsName(): Observable<any> {
  return this.http.get<any[]>(`${this.routeURL}/students`).pipe(
    map(o => o.students));
  }

,

您的问题是，学生是一个数组，但是您将其作为对象来处理。您需要添加一个嵌套映射：rxjs为1，数组为 1

return studentsInfo.pipe(
  map(studentsArray => studentsArray.map(student => ({
    first_name: student.first_name,last_name: student.last_name
  }))),);

PS .：使用类型而不是任何类型将向您显示。您和其他响应者都没有由于缺少键入而看到此问题。