How display nested objects in Angular one per one

Question

I trying to show nested object to select main or children object to add other inside

const categories = [
  {
    id: 1,
    title: 'Tecnology',
    subCategory: [
      {
        id: 3,
        title: 'JavaScript',
        subCategory: [
          {
            id: 4,
            title: 'Angular',
          },
        ],
      },
      {
        id: 5,
        title: 'C#',
      },
    ],
  },
  {
    id: 2,
    title: 'Health',
  },
];

my html

<div>
  <a
    class="dropdown-item"
    *ngFor="let category of categories"
  >

    {{ category.title }}
    <span
      *ngFor="let subCategory of category.subForumCategories"
    >
      > {{ subCategory.title }}
    </span>
  </a>
</div>

expected result

Tecnology
Tecnology > JavaScript
Tecnology > javaScript > Angualr
Tecnology > C#
Health

but i got the result

Tecnology > javaScript > C#
Health

in stackblitz: https://stackblitz.com/edit/angular-ivy-jfkszn?file=src/app/app.component.html

check this out stackblitz.com/edit/angular-6ew9rl?file=app%2Fapp.component.ts — Robus
– Robus, Commented Aug 25, 2020 at 20:43
@Robus this example dont use nested objects i dont see how it helps me. Ty — user3140824
– user3140824, Commented Aug 25, 2020 at 20:59
here is an example of recursive components that I found online stackblitz.com/edit/… — rhavelka
– rhavelka, Commented Aug 25, 2020 at 21:27

Zze · Accepted Answer · 2020-08-25 21:29:35Z

2

Probably better off working this out in typescript, and then iterating an array of strings instead of the objects. Angular templates are great for a lot of stuff, but this is probably starting to push it.

Here is an example of what you could have in ts

var categories = [{
    id: 1,
    title: "Technology",
    subCategory: [{
        id: 3,
        title: "JavaScript",
        subCategory: [{
          id: 4,
          title: "Angular"
        }]
      },
      {
        id: 4,
        title: "C#"
      }
    ]
  },
  {
    id: 2,
    title: "Health"
  }
];


getList();

function getList() {
  var list = extractSubCategories(categories);
  console.log(list);
}

function extractSubCategories(categories) {
  var list = [];
  for (var c of categories) {
    if (c.subCategory) {
      list.push(`> ${c.title}`);
      list.push(...extractSubCategories(c.subCategory).map(sc => `> ${c.title} ${sc}`));
    } else {
      list.push(`> ${c.title}`);
    }
  }
  return list;
}

template:

<div>
  <a class="dropdown-item" *ngFor="let category of getList()" > {{category}} </a>
</div>

edited Aug 25, 2020 at 21:29

answered Aug 25, 2020 at 21:24

Zze

18.9k14 gold badges95 silver badges125 bronze badges

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

2 Comments

rhavelka Over a year ago

is the getList() function in html efficient? it will be doing the loop, pushes, and map every digest cycle. I would double check performance on larger objects.

Zze Over a year ago

@rhavelka with the information provided in this question, yes it would be efficient. If the question stated that the iterable list was 10000+ items, then maybe you would change strategy. Not like this is going to run every tick, so it should meet the purpose.

rhavelka · Accepted Answer · 2020-08-26 16:27:15Z

You can create a recursive component. Then you can just pass in the object to display the way you want.

component.ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'categories',
  template: `
     <div *ngFor="let category of categories">
        <div>
          {{titleHistory}} {{category.title}}
        </div>
        <categories[categories]="category.subCategory" 
                   [title]="titleHistory + category.title" 
                   [depth]="depth+1" 
                   *ngIf="category.subCategory"></categories>
    </div>`,
})
export class CommentComponent implements OnInit {
  @Input() categories: Categories;
  @Input() title: string = '';
  @Input() depth: number = 0;

  titleHistory = '';

  ngOnInit() {
    this.titleHistory = this.depth === 0 ? this.title : (this.title + ' > ');
  }
}

app.component.html

<categories [categories]="categoriesData"></categories>

stackblitz

Edit: updated stackblitz with more options

Collectives™ on Stack Overflow

How display nested objects in Angular one per one

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related