Angular 5 nested ngFor using 1 dimentional array

Question

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?

create a uniqValues array see stackoverflow.com/questions/1960473/… — Eliseo
– Eliseo, Commented Mar 23, 2018 at 13:07
I think you have to create a method that clean your array. Btw for Angular example, I recommend you to use Stackblitz — Zooly
– Zooly, Commented Mar 23, 2018 at 13:07
Here an an angular stackblitz template which you can use to create demo: stackblitz.com/edit/angular-zyh18h — FAISAL
– FAISAL, Commented Mar 23, 2018 at 13:20
Possible duplicate of Get all unique values in an array (remove duplicates) — Oliver
– Oliver, Commented Mar 23, 2018 at 13:25

Alexandre Annic · Accepted Answer · 2018-03-26 07:56:41Z

1

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)
        })
    }
}

edited Mar 26, 2018 at 7:56

answered Mar 23, 2018 at 13:38

Alexandre Annic

10.9k6 gold badges44 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Frank Over a year ago

Thank you for the answer. It seems much shorter than the other answers, but I can't seem to get it working. I think there is something wrong in the html template? I don't understand the Object.keys thing

Alexandre Annic Over a year ago

My bad, you must add Object=Object in the composenent to makes it accessible in the template.

Frank Over a year ago

Say again? Sorry I don't understand 100%. Should I add "Object = Object;" in the component? Would you update your example please? I prefer your answer but I can't get it to work

Alexandre Annic Over a year ago

To make a javascript global variable (as Object) accessible to your template, you must bind it. So in your component you must add the following line Object = Object inside the Typescript code of your component like this: @Component({...}) export class ... { ... Object = Object; ... }. I will add a complete compilable example.

Frank Over a year ago

yes it works man! I can't exactly remember how I finally used it though. But I will mark yours. Thank you very much

Collectives™ on Stack Overflow

Angular 5 nested ngFor using 1 dimentional array

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related