CODEWITHSUNDEEP
arraysangularngfor
Frank
Frank

Reputation: 2431

Angular 5 nested ngFor using 1 dimentional array

Sorry for not giving an example to use but I'm not sure how to create codepen angular 5 examples. Anyways. I want to know if it is possible to use *ngFor to repeat through this array, but only show values once (no duplicates). Check my example image of buttons for how it should look. Is this possible with THIS array? Maybe using pipes or something like that?

enter image description here enter image description here

Upvotes: 1

Views: 510

Answers (1)

Alexandre Annic
Alexandre Annic

Reputation: 10738

A possible solution:

First structure your array:

this.array = [
    {level1: "1", level2: "1.1", level3: "1.1.1"},
    {level1: "1", level2: "1.1", level3: "1.1.2"},
    {level1: "1", level2: "1.2", level3: "1.2.1"}
];

this.fa = {}
this.array.forEach(obj => {
    if(!this.fa[obj.level1]) this.fa[obj.level1] = {};
    if(!this.fa[obj.level1][obj.level2]) this.fa[obj.level1][obj.level2] = [];
    this.fa[obj.level1][obj.level2].push(obj.level3)
})

It assumes you have only 3 levels. Then you will get the following structure: 

{
    "1": {
        "1.1": [
            "1.1.1",
            "1.1.2"
        ]
    }
}

Then iterate through in template:

<div *ngFor="let i of Object.keys(fa)">
    {{i}}
    <div *ngFor="let j of Object.keys(fa[i])">
        {{j}}    
        <div *ngFor="let k of fa[i][j]">
            {{k}}
        </div>
    </div>
</div>

Don't forget to bind the Object variable to your template adding the following line in your component:

Object = Object;

Complete example:

@Component({
    selector: 'app',
    template: `
        <div *ngFor="let i of Object.keys(fa)">
            {{i}}
            <div *ngFor="let j of Object.keys(fa[i])">
                {{j}}
                <div *ngFor="let k of fa[i][j]">
                    {{k}}
                </div>
            </div>
        </div>
    `,
})
export class AppComponent {

    array = [
        {level1: "1", level2: "1.1", level3: "1.1.1"},
        {level1: "1", level2: "1.1", level3: "1.1.2"},
        {level1: "1", level2: "1.2", level3: "1.2.1"}
    ];

    fa = {};

    Object = Object;

    constructor() {
        this.array.forEach(obj => {
            if (!this.fa[obj.level1]) this.fa[obj.level1] = {};
            if (!this.fa[obj.level1][obj.level2]) this.fa[obj.level1][obj.level2] = [];
            this.fa[obj.level1][obj.level2].push(obj.level3)
        })
    }
}

Upvotes: 1

Related Questions