rxjs/angular-如何从服务合并规范化数据？

我不熟悉Angular和RXJS——我正在尝试从rest api返回规范化数据，并在客户端组装层次结构。我创建了这个stack blitz，这是我试图实现的基本版本：

这些接口（ParentData、assnda和ChildData）表示从API返回的JSON数据。父接口和子接口是我希望在客户机上表示数据的方式（在真正的应用程序中，我将把这个新对象绑定到一个分层网格）。关键点在于Assn数据具有一个属性（statusCode），需要基于父级应用于每个子级

// represents normalized data coming from the service
export interface ParentData {
  parentCode: string, 
  name: string
}

export interface AssnData {
  parentCode: string
  childId: number,
  statusCode: string
}

export interface ChildData {
  childId: number,
  type: string
}

// represents the merged data for display 
export interface Parent {
  parentCode: string,
  name: string
  kids: Child[]
}

export interface Child {
  childId: number
  type: string,
  statusCode: string
}

这是我到目前为止的代码（从stack blitz中的data.component.ts中获取）。它正在将Assn对象添加到正确的父对象，但我在将子对象与每个Assn对象合并时遇到问题。我正在执行console.log以查看结果

  getRelationalData() {
    let x = combineLatest(
      this.parentData$,
      this.assnData$,
      this.childData$
    ).pipe(
      map(([pData, aData, cData]) => {
        return pData.map(p => {
          return {
            ...p,
            kids: aData.filter(a => a.parentCode === p.parentCode)
          }
        })
      })
    )
    return x;
  }

---

我有一个新的堆栈blitz正在运行，但它似乎不是最优雅的代码：

我还更改了输出，在屏幕上显示before/after JSON，以便更容易地看到我正在尝试做什么（希望如此）。任何人都能提供使这更好的见解吗

getRelationalData() {
    let x = combineLatest(
      this.parentData$,
      this.assnData$,
      this.childData$
    ).pipe(
      map(([pData, aData, cData]) => {
        return pData.map(p => {
          // get assn objects for this parent
          let assn = aData.filter(a => a.parentCode === p.parentCode);

          // get kids for this parent based on assn object (filter undefined)
          let kids = cData.map(c => this.mergeData(c, assn))
            .filter(k => k !== undefined ) ;

          // return a new parent with the newly created child objects
          return {
            ...p,
            kids: kids
          }
        })
      })
      //, tap(x => console.log(x))
    )
    return x;
  }

  mergeData(child, assnObs){
    // filter the assn objects for each child
    let assn = assnObs.find(a => a.childId === child.id);

    // return undefined so it can be filtered later
    if (assn === undefined){
      return assn;
    }

    //return the child object with the appropriate statusCode
    return Object.assign(
      {},
      child,
      {
        statusCode: assn.statusCode
      }
    )
  }

结果JSON-父对象和子对象彼此正确关联，并且每个子对象都具有基于父对象的适当状态代码：

[
  {
    "parentCode": "abc",
    "name": "John",
    "kids": [
      {
        "id": "123",
        "name": "Billy",
        "age": "10",
        "statusCode": "tallest"
      },
      {
        "id": "789",
        "name": "Sue",
        "age": "6",
        "statusCode": "youngest"
      }
    ]
  },
  {
    "parentCode": "xyz",
    "name": "Jane",
    "kids": [
      {
        "id": "456",
        "name": "Bobby",
        "age": "8",
        "statusCode": "something"
      },
      {
        "id": "789",
        "name": "Sue",
        "age": "6",
        "statusCode": "whatever"
      }
    ]
  }
]