Javascript 如何使用Angular 8中的Ember数据样式API？

我试图使用第三方API响应，该响应遵循以下结构

{
   'product': [{'id': 'foo', 'group': 'bar'},{'id': 'jim', 'group': 'bob'}],
   'group': [{'id': 'bar', 'kingdom':'baz'},{'id': 'cake', 'group': 'steak'}],
   'kingdom': [{'id': 'baz'},{'id':'apple'}],
}

我想将其转换为表单的嵌套数据结构

**Product** 
{
    id: 'foo',
    group: {
        id: 'bar',
        kingdom: {
            id: 'baz'
        }
    }

}

然而，需要注意的是，在上述场景中，产品提供了指向组的指针，随后组通过id提供指向王国的指针。这可能会持续到许多级别，因此我需要一个能够从原始“基本”列表（在本例中为产品）中获取这些信息的解决方案。我确实对原始数据中的每一个键都有一点怜悯，因为它们对于一种类型的数据是唯一的。“产品”总是一种产品

我还希望找到的任何解决方案都可以避免在从未要求数据的情况下进行转换（不要偷懒），例如，如果我从未要求模板中包含product.group.kingdom.name，则不会进行任何工作来解析kingdom。最初，我尝试使用为每个层返回可观测值的服务执行以下操作

例如：

export class Product {
    id: number;
    group: Observable<Group>;
}

然后将数据循环并从映射响应分配。创建了product model类的新实例以尝试避免引用，但该实例未成功运行，并且引用正在重写[product.group.kingdom]的值，并导致映射到同一个kingdom的产品在后续运行时映射函数中的第二行失败（使用适配器创建新产品）

地图示例

data.map((product) => {
    let new_product = Product.adapt(product);
    new_product.group = mapped_map['group'][product.group]
    new_product.group.kingdom = mapped_map['kingdom'][product.group.kingdom]
}

static adapt(product: any) Product {
    return new Product (
       item.id || undefined,
       item.group || undefined,
    )
}

适配器示例

data.map((product) => {
    let new_product = Product.adapt(product);
    new_product.group = mapped_map['group'][product.group]
    new_product.group.kingdom = mapped_map['kingdom'][product.group.kingdom]
}

static adapt(product: any) Product {
    return new Product (
       item.id || undefined,
       item.group || undefined,
    )
}

如果您对我的错误（或以下可能的设计模式）有任何建议，我们将不胜感激。另外，如果有人对我如何避免引用

map（）

中使用的产品值来访问映射的映射键值有任何建议，那将是非常棒的。我尝试过使用lodash的_clone和_cloneDeep，但都没有成功

提前感谢您，请让我知道进一步的信息是否会有所帮助。

如果您希望它是“惰性”的，并且不实际将组填充到产品对象中，将王国填充到组对象中，为什么不创建一个getter函数来调用以获取关联的子对象？显示它类似于

{{productA.getGroup（）.getKingdom（）.id}

如果您希望它是“惰性”的，并且不实际将组填充到产品对象中，将kingdom填充到组对象中，为什么不创建一个getter函数来调用以获取关联的子对象呢？显示它类似于

{{productA.getGroup（）.getKingdom（）.id}