Angular 2: Filter by value in nested array?

Question

I’ve been experimenting with this GitHub repo via a course on Lynda.com (https://github.com/planetoftheweb/learnangular) by Ray Villalobos -- it functions similarly to a basic web app that I’m hoping to build, but I’ve recently hit a bit of a road block.

In that repo linked above, in app/component.app.ts, is the following array:

var ARTISTS: Artist[] = [
  {
    "name": "Barot Bellingham",
    "shortname": "Barot_Bellingham",
    "reknown": "Royal Academy of Painting and Sculpture",
    "bio": "Some bio here."
  },
  // etc...
]

This array is filtered by a pipe as seen in app/pipe.search.ts:

export class SearchPipe implements PipeTransform {
  transform(pipeData, pipeModifier) {
    return pipeData.filter((eachItem) => {
      return eachItem['name'].toLowerCase().includes(pipeModifier.toLowerCase()) ||
        eachItem['reknown'].toLowerCase().includes(pipeModifier.toLowerCase());
    });
  }
}

Here's the filter input:

<input class="search-input" [(ngModel)]="field1Filter" placeholder="type in search term here" (click)="showArtist(item); field1Filter=''">

And the code for the filter results:

<ul class="artistlist cf" *ngIf="field1Filter">
  <li class="artistlist-item cf"
     (click)="showArtist(item);"
     *ngFor="let item of (artists | search: field1Filter)"> 
    <artist-item class="content" [artist]=item></artist-item>
  </li>
</ul>
<artist-details  *ngIf="currentArtist" [artist]="currentArtist"></artist-details>

This all works perfectly, however, in my project, I would need to include three nested arrays, and have the ability to filter based upon the values in those arrays. A sample of the kind of array I need will look something like this:

var ARTISTS: Artist[] = [
  {
    "name": "Barot Bellingham",
    "shortname": "Barot_Bellingham",
    "reknown": "Royal Academy of Painting and Sculpture",
    "bio": "Some bio here...",
    "friends": [
      "James",
      "Harry",
      "Bob",
      "Liz",
      "Kate",
      "Jesse"
    ],
    "emails": [
      "[email protected]",
      "[email protected]"

    ],
    "car": [
      "honda",
      "scion",
      "aston martin"
    ]

  },
  // etc...
]

Therefore, I hope to filter by “Harry,” and only display objects that contain “harry” in either “name,” “reknown,” “friends,” "emails," or "cars." Is this possible, and if so, how can I edit the pipe filter to do this? Thank you!!

(I'm pretty green at angular and JS in general, so I want to apologize in advance if I’ve used incorrect terminology or overlooked/misunderstood something basic.)

DeborahK · Accepted Answer · 2017-06-23 23:40:07Z

2

I deleted my prior answer because it was more confusing than helpful. I pasted example code without applying it to your variables/properties/objects and it was misleading. Let's try again:

export class SearchPipe implements PipeTransform {
  transform(pipeData, pipeModifier) {
    pipeModifier = pipeModifier ? pipeModifier.toLowerCase() : null;
    return pipeModifier ? pipeData.filter(eachItem => {
      eachItem['name'].toLowerCase().indexOf(pipeModifier) !== -1 ||
      eachItem['reknown'].toLowerCase().indexOf(pipeModifier !== -1) : pipeData;
    });
  }
}

The first line of code in the transform method ensures that the modifier passed in is also lowercase so that the compare always compares lower case values. It also has a null check to ensure it does not try to lowercase it if it is null.

The second line of code also uses the "?" syntax to handle the case of a null pipeModifier.

I changed includes to indexOf. Includes checks arrays. Are these items, such as eachItem['name'], an array?

That should be closer.

NOTE: Without a provided plunker ... I did not check the syntax or correct execution of this code.

answered Jun 23, 2017 at 23:40

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

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

8 Comments

Boosman Over a year ago

Thank you so much for your continued help and explanations, DeborahK! I will make a plunker within a day or so. However, I have utilized your revised code, but it prevents the app from loading, and I can't figure out why (console says unexpected semi-colon). See screenshot of console error (imgur.com. This is not triggered when I use the filter presented in my question. Thanks again!

DeborahK Over a year ago

Are there any other errors displayed? This one is a side effect and not the actual error.

Boosman Over a year ago

No, this is the only error displayed in console, and it's preventing the app from loading. Only "Loading..." is displaying, which is what is inside my <app></app> tags.

DeborahK Over a year ago

Then a plunker would be most helpful.

Boosman Over a year ago

Great; I hope to get to it tomorrow. I'm literally just using the files from this GitHub repository. Perhaps I need to start afresh.

|

Collectives™ on Stack Overflow

Angular 2: Filter by value in nested array?

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related