How to load a specific object in data array


#1

Hello guys,

I have a data provider in Angular 5.

export class DataProvider {
  location: any;

  private locations: any[] = [
    {
      "name": "restaurant",
      "location": "downtown",
      "category": "restaurant",
      "id": "1"
    },

    {
      "name": "law firm",
      "location": "center city",
      "category": "office",
      "id": "2"
    },

    {
      "name": "public library",
      "location": "suburb",
      "category": "library",
      "id": "3"
    } ]

and here’s my html file.

<div *ngFor="let location of locations">
   <h1></h1>
    <h2></h2>
</div>

In this scenario, how can I load a specific object (item) in data array with certain attributes? For instance, If I want to load an object with "category" :"restaurant", what should I do on my HTML file? so no other objects should show up besides the one with category: "restaurant"

I figured*ngFor let of directive will load everything at a time and I can’t find any description on how to work around it when I want to call up a specific object with certain attributes.

Thanks in advance,


#2

Try:


<div *ngFor="let location of locations">

  <ng-container *ngIf="location.category === 'restaurant'">
     <h1></h1>
     <h2></h2>
  </ng-container>

</div>

#3

That’s a great idea. Let me try that now.
Thanks


#4

Check out Firestore (there’s a FREE tier):


#5

Thanks, yes, everything works… I thought I have to create a complicated filter for this but ngIf magically solves all problems.

I will check out Firestore! Firebase is definitely some of the best ever.


#6

If your ngFor is large, you might produce enough ngIf’s that you get performance issues. @robinyo’s solution may be the simplest to code, but if you sort in the ts file, you guarantee that checks only happen once.

filterLocationCategory(unfiltered: Array<Location>, categoryName: string): Array<Location> {
  return unfiltered.filter(x => x.category === categoryName);
}

in this example, the filter is one line long, so you might not want the whole function structure, but you can plug in whatever to that structure. Then your template ngFor’s over the filtered array.


#7

Also, about this: if you study the examples of Array.filter, Array.map and Array.reduce, you’ll find that lots and lots of array filters can be defined in a single line. Modern Javascript is extremely powerful.


#8

Yes, if you have over 100 data objects in array, several categories, using filter can do the job without having to use several ngIf directives. I’m not sure how much performance several ngIfs will degrade because I haven’t tested yet.
I will check Array.filter, Array.map. I was looking into this example to solve this problem:


#9

@AaronSterling:

.html:

<div *ngFor="let location of filterLocationCategory(locations, 'restaurant')">

  <h1></h1>
  <h2></h2>

</div>

.ts:

  ...

  public locations: Array<Location>;

  ..

  public ionViewDidLoad() {
    this.locationService.listLocations().subscribe(data => {
      this.locations = data;
    });
  }
  
  ...

  filterLocationCategory(unfiltered: Array<Location>, categoryName: string): Array<Location> {
    return (unfiltered ? unfiltered.filter(x => x.category === categoryName) : unfiltered);
  } 

#10

Sure. Though personally, I would do that in the function signature:

filterLocationCategory(unfiltered: Array<Location> = new Array<Location>, categoryName: string): Array<Location>


#11

Great ways to work around this problem! Thanks guys! I will see which one works better.