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

Posted 2023-03-13

【中文标题】如何仅提取 json 的某些属性，使用 rxjs 作为可观察对象返回

【英文标题】：How to extract only certain properties of json, returning as an observable using 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));

【参考方案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));