List categories of a Blog with Angular ngFor directive

Question

I just want to list the categories of a Blog in Angular. When I use ngFor, It shows a list of the categories but is bringing in some repeated ones, like if it were bringing all the blogs and not just the categories that some of them share. Hope I was clear on this question.

This is my html:

<aside class="categories">
     <h2 class="aside-title">Categorias</h2>

     <ul *ngFor="let data of datas; index as i">
        <li class="nav-elipse-blue"><a [routerLink]="['/pagina',datas.category]" title="Blog CSS 
        articles">{{ data.category.name }}</a></li>
     </ul>

</aside>

Hello Bao Huynh, Can you be more specific, since I am a newbie? Do I have to create a Pipe or something? — Luis Alejandro López de Anda, Feb 08 '22 at 21:53

StepUp · Answer 1 · 2022-02-09T07:35:44.340

1

It looks like you need to remove duplicates from your array.

Based on this answer, you can do this:

const uniqueCategorias = datas.filter((value, index) => {
  const _value = JSON.stringify(value);
  return index === obj.arr.findIndex(obj => {
    return JSON.stringify(obj) === _value;
  });
});

and use it:

 <ul *ngFor="let data of uniqueCategorias; index as i">
    <li class="nav-elipse-blue"><a [routerLink]="['/pagina',datas.category]" title="Blog CSS 
    articles">{{ data.category.name }}</a></li>
 </ul>

and in TypeScript file:

uniqueCategorias; 

getUniqueCategorias(){
    uniqueCategorias = datas.filter((value, index) => {
        const _value = JSON.stringify(value);
        return index === obj.arr.findIndex(obj => {
            return JSON.stringify(obj) === _value;
        });
    });
}

edited Feb 09 '22 at 07:35

answered Feb 08 '22 at 19:18

StepUp

36,391
15
88
148

Hello StepUp! I think you cannot call a variable from the 'ngFor ' directive., because you wrote : const uniqueCategorias – Luis Alejandro López de Anda Feb 08 '22 at 21:59
@LuisAlejandroLópezdeAnda yeah, you are right. I've added TypeScript realization of this method. Please, see my updated reply – StepUp Feb 09 '22 at 07:36
@LuisAlejandroLópezdeAnda Feel free to ask any question. If my reply helps then you can upvote or mark it as an answer to simplify the future search of other users. Pelase, see [How does accepting an answer work?](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) – StepUp Feb 23 '22 at 15:06
Hello StepUp, you seem to have so many badges. I wolud like to share to you this other question: https://stackoverflow.com/questions/71849947/show-the-slug-in-the-url-when-a-user-clicks-on-a-blog-in-angular-and-strapi – Luis Alejandro López de Anda Apr 13 '22 at 18:25
@LuisAlejandroLópezdeAnda Thanks for the kind words! You need to accept replies as an answer if you feel that it solved your question. This is how stackoverflow works and when somebody will see your new question, then it will have a strong motivation to solve your question as you accept answers. In addition, it simplifies the search of future users. [How does accepting an answer work?](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) – StepUp Apr 13 '22 at 19:34
Hello SetUp!, You are right about it. I remember about this topic. The thing is that you were very right about removing duplicates from my array. It was just the code did not work for me. I found this other way that it may be similar with yours. I first looped my array, and then, I filtered the data. I posted the code that worked for me below. – Luis Alejandro López de Anda Apr 13 '22 at 20:49

score 0 · Answer 2 · answered Feb 09 '22 at 00:01

One way is to create a separate categories variable for your class, or if you can pull the list of categories straight from the database. To get the unique categories you can use JS's "set" data structure to filter out unique items: uniqueCategories = new Set(data.map(item => item.category.name))

Angular:

@Component({
  selector: 'component'
  templateUrl: 'component.html'
})
export class Component {
  data = ....
  uniqueCategories = new Set(this.data.map(item => item.category.name))
}

HTML

<ul *ngFor="let category of uniqueCategories">
  <li>{{category}}</li>
</ul>

score 0 · Answer 3 · answered Feb 09 '22 at 07:52

You have to remove first the duplicates from an array and after that you have to use *ngFor.

You can remove duplicates in different ways:

Using Set

let data = ['A', 'B', 'A', 'C', 'B'];
let uniqueData = [...new Set(data)];

Using forEach() and include() :

 let data = ['A', 'B', 'A', 'C', 'B'];

 let uniqueData = [];
 data.forEach((c) => {
    if (!uniqueData.includes(c)) {
    uniqueData.push(c);
  }
 });

There are other methods but these are more understandable.

After that in your HTML

     <ul *ngFor="let data of uniqueData">
        <li>{{category}}</li>
     </ul>

score 0 · Answer 4 · answered Apr 13 '22 at 20:50

0

myCategories(datas: any){
 let newArr = [];
 let uniqueArray:any;
  datas.forEach((item, index) => {
    newArr.push(item.category.name);
    uniqueArray = newArr.filter(function(item, pos, self) {
      return self.indexOf(item)===pos;
    })

     
  });
  return uniqueArray;

}

answered Apr 13 '22 at 20:50

Luis Alejandro López de Anda

159
11

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 13 '22 at 22:53

List categories of a Blog with Angular ngFor directive

4 Answers4