如何使用 angular 显示和过滤深层嵌套的 JSON
How to display and filter deep-nested JSON with angular
我有以下 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>
这 returns 没有错误,但是它没有显示我的数据。
此外,我想使用 ngx-pipes
中的 unique
管道来过滤掉重复的 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);
}
我有以下 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>
这 returns 没有错误,但是它没有显示我的数据。
此外,我想使用 ngx-pipes
中的 unique
管道来过滤掉重复的 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);
}