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

【问题标题】：How to extract only certain properties of json, returning as an observable using rxjs如何仅提取 json 的某些属性，使用 rxjs 作为可观察对象返回
【发布时间】：2021-01-17 22:49:18
【问题描述】：

例如这是我收到的 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}));
  }

订阅 observable 时返回 undefined

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

【问题讨论】：

标签： json angular typescript rxjs rxjs-observables

【解决方案1】：

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

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

【讨论】：

哦，是的，我刚刚意识到，但它也返回 undefined
您需要指定返回值或将{} 括在括号({}) 内。否则它将被视为代码块而不是对象。
更改后我收到此错误，解析器希望找到一个 '}' 来匹配这里的 '{' 标记。
糟糕，好像少了一组花括号
哦，它现在返回一个值，但是现在，first_name: undefined, last_name: undefined

【解决方案2】：

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

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

PS.：使用类型而不是任何类型会向您展示这一点。由于缺少输入，您和其他响应者均未发现此问题。

【讨论】：

【解决方案3】：

这是一个短代码sn-p。

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({
...}));

【讨论】：

forEach-push 方法是一种不好的做法，应该由map 代替

【解决方案4】：

问题

问题在于你如何返回你的 observable

让我们分解代码

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
}

这部分实际上有没有返回语句，因此默认情况下javascript返回未定义！

解决方案

要使用没有返回语句的箭头函数，您需要将{} 包装在() 中，如下所示

students => ({ })

下面会起作用

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

【讨论】：