0

我是 Angular 和 RXJS 的新手——我正在尝试从 rest api 返回标准化数据并在客户端上组装层次结构。我创建了这个堆栈闪电战，这是我想要完成的一个非常基本的版本： https ://stackblitz.com/edit/angular-ffdbza

这些接口（ParentData、AssnData 和 ChildData）表示从 API 返回的 JSON 数据。Parent 和 Child 接口是我希望在客户端上表示数据的方式（在实际应用程序中，我会将这个新对象绑定到分层网格）。关键是Assn数据有一个属性（statusCode）需要基于Parent应用到每个Child。

// 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
}

这是我到目前为止的代码（从堆栈闪电战中的 data.component.ts 中获取）。它将 Assn 对象添加到正确的父对象，但我无法将 Child 对象与每个 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;
  }
4

1 回答 1

0

我有一个新的堆栈闪电战正在运行，但它似乎不是最优雅的代码： https ://stackblitz.com/edit/angular-rg6q5d?file=src/app/data.component.ts

我还更改了输出以在屏幕上显示之前/之后的 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"
      }
    ]
  }
]
于 2019-10-08T16:22:09.553 回答