Explore various types of content on a blog using Angular's ngFor directive

Question

Explore various types of content on a blog using Angular's ngFor directive

I am trying to display a list of categories for a Blog in Angular using ngFor. However, I am facing an issue where it is displaying some categories multiple times, as if it is pulling in all the blogs instead of just the categories that are shared among them. I hope my question was clear.

Here is the code snippet from my HTML file:

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

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

</aside>

javascript angular typescript

Answer 1

Answer №1

It seems like there is a need to eliminate duplicates from your array.

According to this solution, you can achieve that with the following code:

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

and then implement it like this:

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

In your TypeScript file, add:

uniqueCategorias;

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

Answer 2

It seems like there is a need to eliminate duplicates from your array.

According to this solution, you can achieve that with the following code:

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

and then implement it like this:

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

In your TypeScript file, add:

uniqueCategorias;

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

Answer 3

Answer №2

To simplify your code, consider creating a separate variable called 'categories' for your class instead of fetching the list directly from the database. To extract unique categories, you can utilize JavaScript's "set" data structure to eliminate duplicates:

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>

Answer 4

To simplify your code, consider creating a separate variable called 'categories' for your class instead of fetching the list directly from the database. To extract unique categories, you can utilize JavaScript's "set" data structure to eliminate duplicates:

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>

Answer 5

Answer №3

To begin with, eliminate any duplicate elements from the array before utilizing *ngFor directive.

There are various ways to remove duplicates:

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

Although there are other methods available, these ones are more user-friendly.

Once you have done that, in your HTML

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

Answer 6

To begin with, eliminate any duplicate elements from the array before utilizing *ngFor directive.

There are various ways to remove duplicates:

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

Although there are other methods available, these ones are more user-friendly.

Once you have done that, in your HTML

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

Answer 7

Answer №4

filterCategories(data: any){
 let categoriesArray = [];
 let uniqueCategories:any;
  data.forEach((item, index) => {
    categoriesArray.push(item.category.name);
    uniqueCategories = categoriesArray.filter(function(item, pos, self) {
      return self.indexOf(item)===pos;
    })

     
  });
  return uniqueCategories;

}

Answer 8

filterCategories(data: any){
 let categoriesArray = [];
 let uniqueCategories:any;
  data.forEach((item, index) => {
    categoriesArray.push(item.category.name);
    uniqueCategories = categoriesArray.filter(function(item, pos, self) {
      return self.indexOf(item)===pos;
    })

     
  });
  return uniqueCategories;

}

Explore various types of content on a blog using Angular's ngFor directive

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

persistent image in HTML affecting the layout of the header

What is the approach taken by Angular when it comes to managing dependency injection for a variety

Jquery AutoComplete: Finding the ID of the selected item

Getting the date from an XHR header in Angular2: A step-by-step guide

Tips for effectively identifying TypeScript SyntaxKind within TSLint

How can Vue be used to dynamically alter a string within an input field by incorporating the status of checked checkboxes?

The 'path' property is not found on the 'ValidationError' type when using express-validator version 7.0.1

In Vue.js, the 'select' option is consistently set as the default choice

Encountering the "TypeError: document.getElementById(...) is null" error message while utilizing react.js in conjunction with chart.js

Using custom properties with RouteComponentProps from react-router-dom

Send a request to an API using Django REST framework

What is the best way to transfer a jQuery variable to PHP variables in order to use them in a Select Query?

Using Javascript to dynamically populate dropdown options based on radio button selection

Cloud-based Functions in Firebase and Firestore

A guide on viewing the output of an AJAX request using Python and Selenium

What is the best way to manage files in production using Next.js?

How can AngularJS achieve ng-repeat functionality with multiple variables similar to ng-init?

Adjust the jQuery.animate function based on the specific value

Designing a user interface that consists of numerous distinct components

Exclude certain APIs from utilizing basic authentication in Fastify