AngularJS将递归JSON解析为对象数组

Posted 2023-02-27

【中文标题】AngularJS将递归JSON解析为对象数组

【英文标题】：AngularJS parsing recursive JSON into object array

【发布时间】：2020-02-27 03:43:42

【问题描述】：

我一直在使用 AngularJS 1.7 并从后端获取对象以进行过滤时遇到问题。也就是说，我收到了一个由相同对象组成的 JSON，但有些是其他对象的子对象，例如：

[
    
        "id":2,
        "type":"CORP",
        "description":"A-corpus",
        "children": [
            
                "id":3,
                "type":"FLOOR",
                "description":"1st floor",
                "children":[] ]
             
         ]
     
]

这些对象都是 Place 类型的。我事先不知道 JSON 的深度，必须递归地通过它来获取所有地方的列表。为此，我创建了一个名为 place.ts 的相应对象：

export class Place 
  constructor(
    public id: Number,
    public type: String,
    public description: String,
    public children: Array<Place>) 


@Injectable(
  providedIn: 'root'
)
export class placeAdapter implements Adapter<Place> 
  adapt(item: any): Place 
    return new Place(
      item.id,
      item.type,
      item.description,
      item.children
    );
  

适配器是来自Consuming APIs in Angular: The Model-Adapter Pattern 的设计模式，它适用于从后端接收其他项目。此外，我还有名为 place.service.ts 的服务打字稿：

export class PlaceService 

  constructor(private http: HttpClient, private adapter: placeAdapter) 

  public query(): Observable<Place[]> 
    return this.http.get('api/places').pipe(
      map((data:any[]) => 
        console.log("place by type:" + data);
        return data.map(item => this.adapter.adapt(item));
      ));
  

这个设计确实从其他端点读取了一些嵌套项，但是当我尝试接收这些对象时进入了无限循环。它反复输出到控制台的对象是：

按类型放置：[object Object],[object Object]

即使我给它一个没有子位置的 JSON。 IntelliJ 向我展示了对同一个地方和他们的孩子的无尽请求。无论 JSON 有多少嵌套项，解析都会进入一个循环，我什么也得不到，因为循环会导致整个应用程序运行得太慢。

如何使用最佳实践在 AngularJS 中将此类递归 JSON 解析为对象数组？

【问题讨论】：

适配器模式看起来像是一种应用简单纯函数的复杂方式，当您可以导入纯函数并在映射中使用它时，无需依赖注入适配器。我不会让这种模式污染我的项目。

您可能是对的，但这不是问题的根源。不过，我想我可能已经找到了！

【参考方案1】：

发现问题。这些对象确实可以使用，并且循环不是我发布的代码的错误。这是我试图获取数据的 Angular 组件ng-multiselect-dropdown 的错误（它调用了查询地点列表的方法）。经过一番研究，事实证明该组件不支持动态内容，因此它或 Angular 本身不断重复 GET 请求。

经过一些变通方法后，该组件现在可以接受动态内容，并且我可以使用我之前发布的代码访问位置对象。