时间戳

首页 > 解决方案 > RxJS 和 ANGULAR：使用 RxJS 根据特定的“键”重构/重新排序 json 数据

angular - RxJS 和 ANGULAR：使用 RxJS 根据特定的“键”重构/重新排序 json 数据

问题描述

我正在获取这个 JSON 数据，它是一个对象数组，我需要对其进行重组/重新排序，以便我可以在我的组件中呈现信息。

现在的结构：

[
  {
    "name": "Rahul",
    "class": 3,
    "gender": "M",
    "section": "B",
    "rollNumber": "1231",
    "sports": [
      "Badminton",
      "Chess"
    ],
    "age": 7
  },
  {
    "name": "Rajat",
    "class": 5,
    "gender": "M",
    "section": "C",
    "rollNumber": "123122",
    "sports": [
      "Chess"
    ],
    "age": 9
  },
]

所需结构：

class 4
   section A
       name
   section B
       name
class 5
   section A
       name
   section B
       name
.
.
.

我在这里使用 rxjs 中的 groupBy() 和 mergeMap() 进行了尝试：示例 2

这是我的角度服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, from, of, zip, pipe } from 'rxjs';
import { groupBy, mergeMap, toArray, map, tap} from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ConfigService {
  const studentURL = 'https://student-management-api-1u3cd4j7s.now.sh/students';

  constructor(private http: HttpClient) { }
  public getStudents(): Observable<any> {
    const studentList = this.http.get(this.studentURL);
    .tap(result => result.json());
    from(studentList)
    .pipe(
      groupBy(studentList => studentList.class),
      mergeMap(group => zip(of(group.key), group.pipe(toArray())))
    )
    .subscribe(console.log('studentList', studentList));
    return studentList;
  }
}

组件.ts 文件

import { Component, OnInit } from '@angular/core';

import { ConfigService } from '../config/config.service';

@Component({
  selector: 'app-class-component',
  templateUrl: './class-component.component.html',
  styleUrls: ['./class-component.component.css']
})
export class ClassComponentComponent implements OnInit {
  students: object;
  constructor(private data: ConfigService) {}

  ngOnInit() {
    this.data.getStudents().subscribe(data => {
      this.students = data;
      console.log(data);
    });
  }
}

组件.html 文件

<div class='container'>
  <ul *ngFor="let student of students; let i = index">
    <h3> Class {{ student.class }}</h3>
    <li *ngFor="let section of students; let i = index">
      <h5> section {{ student.section}}</h5>
      <!-- <a href='#' *ngFor="let name of students">{{student.name}}</a> -->
    </li>
  </ul>
</div>

我认为在获取后对服务本身进行重组/重新排序会更好。不知道我哪里错了，我错过了什么。

标签： angularrxjs

解决方案

第 1 步：您将获得一个数组，它发出整个数组以供 groupBy 工作，您需要发出所有值，因此在这里使用 switchMap 和 from 我们将发出数组的所有条目

第 2 步：groupBy 将提供另一个 observable，您需要将其合并以查看分组结果。现在所有组都将作为值发出

在下面的示例中，可以有 2 个组，第 3 类和第 5 类，因此订阅函数中的最终结果将被调用两次，一个是类 3，另一个是类 5。

第 3 步：如果你想更深入地重复 groupBy 和 mergeMap

this.http.get(this.studentURL).pipe(
  switchMap(val => from(val)),
  groupBy(studentList => studentList.class),
  mergeMap(group => group.pipe(toArray())),
  map(studentList => ({['class' + studentList[0].class]: studentList }))
)

Stackblitz：https ://stackblitz.com/edit/rxjs-8jlvij?file=index.ts

更新2：解决方案

服务：

public getStudents(): Observable<any> {
  return this.http.get<any[]>(this.studentURL)
  .pipe(
    switchMap(val => from(val)),
    groupBy(studentList => studentList.class),
    mergeMap(group => group.pipe(toArray())),
    map(studentList => ({
      [studentList[0].class]: studentList.reduce((sections, student) => ({...sections, [student.section]: [...(sections[student.section] || []), student]}), {})
    })),
    scan((response, studentList) => ({...response, ...studentList}), {})
  );
}

组件：

students$: Observable<any>; 
// you can hook up the observable here 
// in template you can use the the async pipe 
// to subscribe to the observable

ngOnInit() {
  this.students$ = this.service.getStudents();
}

模板：

<div class='container'>
  <ul *ngFor="let classItem of students$ | async | keyvalue; let i = index">
    <li> Class {{ classItem.key }}</li>
      <ul>
        <li *ngFor="let sectionItem of classItem.value | keyvalue; let i = index">
          <h5> Section {{sectionItem.key}}</h5>
          <ul>
            <li><a href='#' *ngFor="let student of sectionItem.value ">{{student.name}}</a></li>
          </ul>
        </li>
      </ul>
  </ul>
</div>

更新了 Stackblitz：https ://stackblitz.com/edit/angular-tspamr

推荐阅读