首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用angular显示和过滤深度嵌套的JSON

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

Stack Overflow用户
提问于 2017-02-10 01:07:00
回答 1查看 1.2K关注 0票数 2

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

我正在尝试访问每个模型、年份和样式的以下属性: Model.Model[].Years[].Styles[].submodel.modelName

我的尝试是:

代码语言:javascript
复制
<div *ngFor="let model of models?.models">
 <div *ngFor="let submodel of model['years']['styles']">
  Test: {{ submodel.modelName}}
 </div>
</div>

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

另外,我想使用来自ngx-pipesunique管道来过滤掉重复的modelName

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

以下代码:

代码语言:javascript
复制
<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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-02-10 01:42:15

你的心理模型看起来是正确的(第二行),但你的ngFor不是。下面是根据JSON的形状我所期望的伪代码:

代码语言:javascript
复制
// 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/)。

Working example

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

模板摘录:

代码语言:javascript
复制
<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>

自定义管道:

代码语言:javascript
复制
@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);
}
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42142736

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档