【问题标题】:AngularJS parsing recursive JSON into object arrayAngularJS将递归JSON解析为对象数组
【发布时间】: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 解析为对象数组?

【问题讨论】:

  • 适配器模式看起来像是一种应用简单纯函数的复杂方式,当您可以导入纯函数并在映射中使用它时,无需依赖注入适配器。我不会让这种模式污染我的项目。
  • 您可能是对的,但这不是问题的根源。不过,我想我可能已经找到了!

标签: javascript node.js json angularjs spring-boot


【解决方案1】:

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

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

【讨论】:

    猜你喜欢
    • 2016-10-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-22
    • 2020-05-02
    • 1970-01-01
    • 1970-01-01
    • 2014-12-02
    相关资源
    最近更新 更多