Как отображать и фильтровать глубоко вложенный JSON с угловыми

Question

У меня есть следующие JSON объект: http://pastebin.com/1TguvZXc

Я пытаюсь получить доступ к следующему свойству для каждой модели, год, и стиля:. Model.Model [лет] [] .styles [] submodel.modelName

Моя попытка:.

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

Это не возвращает ошибок, однако он не отображает мои данные.

Кроме того, я хотел бы использовать трубу unique от ngx-pipes, чтобы отфильтровать дубликат modelName.

Как показать уникальные значения subodel.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

Answer 1

Ваша ментальная модель выглядит правильно (вторая строка), но ваши ngFor s нет. Вот псевдо-код, что я бы ожидать, учитывая форму вашего 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/).

Working example

---

Edit: Если вам нужно фильтровать массив, одно решение является обычай трубы. Я обновил свой 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); 
}