如何使用angular显示和过滤深度嵌套的JSON

摩西

我有以下JSON对象:http : //pastebin.com/1TguvZXc

我尝试为每个模型,年份和样式访问以下属性:Model.Model []。Years []。Styles []。submodel.modelName

我的尝试:

<div *ngFor="let model of models?.models">
 <div *ngFor="let submodel of model['years']['styles']">
  Test: {{ submodel.modelName}}
 </div>
</div>

这不会返回任何错误,但是不会显示我的数据。

另外,我想使用uniquefrom管道ngx-pipes过滤掉重复项modelName

如何显示submodel.modelName的唯一值?

以下代码:

<div *ngFor="let model of models?.models | unique">
  <div *ngFor="let year of model['years']">
    <div *ngFor="let style of year['styles']">
        {{model.name}}, {{ style.submodel.body }}
  </div>
 </div>
</div>

产生以下输出:

2 Series, Coupe 2 Series, Coupe 2 Series, Convertible 2 Series, Convertible 2 Series, Convertible 2 Series, Coupe 2 Series, Convertible 2 Series, Coupe 3 Series, Sedan 3 Series, Sedan 3 Series, Sedan 3 Series, Sedan 3 Series, Wagon 3 Series, Sedan 3 Series, Sedan 3 Series, Wagon 3 Series, Sedan 3 Series, Sedan 3 Series, Sedan 3 Series Gran Turismo, Hatchback 3 Series Gran Turismo, Hatchback 4 Series, Convertible 4 Series, Convertible 4 Series, Convertible 4 Series, Convertible 4 Series, Coupe 4 Series, Coupe 4 Series, Coupe 4 Series, Coupe 4 Series Gran Coupe, Sedan 4 Series Gran Coupe, Sedan 4 Series Gran Coupe, Sedan 4 Series Gran Coupe, Sedan 5 Series, Sedan 5 Series Gran Turismo, Hatchback 5 Series Gran Turismo, Hatchback 5 Series Gran Turismo, Hatchback 6 Series, Convertible 6 Series, Coupe 6 Series, Convertible 6 Series, Convertible 6 Series, Coupe 6 Series, Convertible 6 Series, Coupe 6 Series, Coupe 6 Series Gran Coupe, Sedan 6 Series Gran Coupe, Sedan 6 Series Gran Coupe, Sedan 6 Series Gran Coupe, Sedan 7 Series, Sedan 7 Series, Sedan 7 Series, Sedan 7 Series, Sedan 7 Series, Sedan 7 Series, Sedan ALPINA B6 Gran Coupe, Sedan ALPINA B7, Sedan M2, Coupe M3, Sedan M4, Convertible M4, Coupe M6, Convertible M6, Coupe M6 Gran Coupe, Sedan X1, SUV X1, SUV X3, SUV X3, SUV X3, SUV X3, SUV X4, SUV X4, SUV X5, SUV X5, SUV X5, SUV X5, SUV X5, SUV X5 M, SUV X6, SUV X6, SUV X6, SUV X6 M, SUV i3, Hatchback i3, Hatchback i3, Hatchback i8, Coupe

这远非理想。我想过滤数据,使其具有唯一性,如下所示:

2 Series, Coupe 2 Series, Convertible 3 Series, Sedan 3 Series, Wagon 3 Series Gran Turismo, Hatchback 4 Series, Convertible 4 Series, Coupe 4 Series Gran Coupe, Sedan 5 Series, Sedan 5 Series Gran Turismo, Hatchback 6 Series, Convertible 6 Series, Coupe 6 Series Gran Coupe, Sedan 7 Series, Sedan ALPINA B6 Gran Coupe, Sedan ALPINA B7, Sedan M2, Coupe M3, Sedan M4, Convertible M4, Coupe M6, Convertible M6, Coupe M6 Gran Coupe, Sedan X1, SUV X3, SUV X4, SUV X5, SUV X5 M, SUV X6, SUV X6 M, SUV i3, Hatchback i8, Coupe

隐身忍者

您的心理模型看起来正确(第二行),但您ngFor模型却不正确这是给定JSON形状的预期伪代码:

// div ngFor="let model of models?.models"
//  div ngFor="let year of model.years"
//   div ngFor="let style of year.styles"
//    Test: {{ style.submodel | json }}

使用JSON格式化程序查看数据的形状可能会有所帮助(例如:http : //jsonformatter.org/)。

工作实例


编辑:如果您需要过滤数组,一种解决方案是自定义管道。我更新了plnkr以包含示例。我将ngFor指令内部的数组通过管道传递给管道,并使用哈希映射来过滤结果。在生产代码中,我希望您createHashKey()可以用更好的实现来替换函数的内部,以对独特的示例进行分类。

模板摘录:

<div *ngFor="let model of models?.models">
  <div *ngFor="let year of model.years">
    <div *ngFor="let style of (year.styles | myCustomPipe:'submodel')">
      Test: {{ style.submodel | json }}
    </div>
  </div>
</div>

自定义管道:

@Pipe({
  name: 'myCustomPipe'
})
export class MyCustomPipe implements PipeTransform {

  transform(value: any[], ...args: string[]): any[] {

    let hashMap = {};
    let filterKey = args[0];

    for (let v of value) {
      const hashKey = createHashKey(v, filterKey);
      hashMap[hashKey] = v;
    }
    return Object.values(hashMap);
  }

}

function createHashKey(obj: any, filterKey: string): string {
  // For demonstration purposes only:
  return JSON.stringify(obj.filterKey);
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何访问深度嵌套的json键和值

如何使用 TypeScript 和 Jest 模拟深度嵌套的函数

如何使用 Angular 过滤 JSON?

如何基于Postgres中的过滤条件更新深度嵌套的JSON对象?

如何在 Angular 中对嵌套的 JSON 对象使用搜索过滤器?

从深度嵌套的对象数组中创建过滤和简化的数据

如何确定深度嵌套的json字段的路径

如何从CouchBase查询深度嵌套的JSON数组?

如何从Couchbase查询深度嵌套的JSON值?

Ansible,如何查询深度嵌套的 json 键

在Go Lang中使用深度嵌套的JSON

如何使用 Vuejs 和 Axios 读取深度 JSON 数据

如何在列表中过滤深度嵌套的地图?

在JS中使用深度嵌套的数组过滤数组

MongoDB使用聚合框架过滤深度嵌套的数组

如何使用Javascript映射和过滤JSON

如何在深度嵌套的JSON中比较所有子ID和其父ID?

如何在嵌套Json中使用angularjs进行过滤

使用 iOS 和 Swift 访问深度嵌套的 json 数据的最简单方法是什么?

如何根据用户输入过滤和显示JSON数据?

如何使用ngrx / entity(EntityState和EntityAdapter)规范深度嵌套的数据

如何在jspdf angular8中显示嵌套的Json

如何通过Angular Js显示n层嵌套的json对象?

使用JavaScript和jQuery显示多层嵌套JSON数据

迭代深度嵌套的 JSON

如何使用python從深度嵌套的json中獲取所有鍵?

如何使用Kinect和OpenCV组合并显示深度和RGB图像

如何使用Java 8流和过滤器过滤嵌套循环?

如何使用href目标显示div和嵌套div?