How to filter data in Angular view based on user input? [duplicate]

Question

I would like to display data in Angular 7/8 based on user search parameters. Initially the view should be blank,but when the user inputs the search parameters and clicks the Submit button the view should be updated with the new/filtered information.

Desired approach: Empty ArrayB should be populated with the filtered data of ArrayA

Implementation:

ArrayA = [{id:1, Name:"Steve"},{id:2, Name:"Maureen"},{id:3, Name:"Damian"},{id:4, Name:"Dee"}];
ArrayB = [];

HTML code:

<div class="container">
    <div class="row">
        <form class="form" [formGroup]="filterForm" >
            <label for="">ID</label>
            <input type="text" name="person_id" formControlName="person_id" id="person_id">
            <button type="submit" (click)="submit($event)">Submit</button>
        </form>
    </div>
    <div class="row">
        <div class="col-12" ngFor="let filteredArr of ArrayB">{{filteredArr.name}}</div>
    </div>
</div>

When i click submit, the ArrayA should be filtered based on the ID provided by the user and pushed into ArrayB and the view updated with the new information.

    submit(event){
//Filter ArrayA and push to ArrayB
    }

If there is a better and much simpler way of achieving the same i will greatly appreciate

Does this answer your question? Angular 7 filter array

Jeppe
– Jeppe

2019-12-31 11:22:40 +00:00
Commented Dec 31, 2019 at 11:22 — Jeppe
– Jeppe, Commented Dec 31, 2019 at 11:22

Himanshu Singh · Accepted Answer · 2019-12-31 11:28:00Z

1

You can use .filter() function to filter arrayA then you can store the generated result in arrayB and then bind this arrayB to your html template. In below example id can be considered as input coming from user and when he click on submit button you can fire this filter function to get arrayB.

Your html code can be like this: <button (click)="clickHandler()">submit</button>

Where clickHandler() will be the function where you'll write your filter logic.

ArrayA = [{id:1, Name:"Steve"},{id:2, Name:"Maureen"},{id:3, Name:"Damian"},{id:4, Name:"Dee"}];


let id = 1;

arrayB = ArrayA.filter((item)=>{
    if(item.id == id)
      return item;
    else 
      return null;
})

console.log(arrayB);

answered Dec 31, 2019 at 11:28

Himanshu Singh

2,1651 gold badge8 silver badges16 bronze badges

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

3 Comments

Steve Gaita Over a year ago

how do i implement the binding part, my current implementation is generating an ERROR TypeError: Cannot read property 'name' of undefined as arrayB is initially empty

Steve Gaita Over a year ago

here is my implementation: <div class="col-12" ngFor="let filteredArr of ArrayB">{{filteredArr.name}}</div>

Himanshu Singh Over a year ago

@SteveGaita It is Name with N

Sharaaf Nazeer · Accepted Answer · 2019-12-31 11:29:21Z

1

Try this,

this.ArrayB = this.ArrayA.filter(item => item.id == this.filterForm.value.person_id))

answered Dec 31, 2019 at 11:29

Sharaaf Nazeer

1021 silver badge12 bronze badges

Comments

Manikant Gautam · Accepted Answer · 2019-12-31 11:31:19Z

1

You should have to filter your array arrayA based on values of formControlName person_id

this.ArrayB = this.ArrayA.filter(item => item.id == this.filterForm('person_id').value));

answered Dec 31, 2019 at 11:31

Manikant Gautam

3,5911 gold badge20 silver badges30 bronze badges

Comments

Prashant Pimpale · Accepted Answer · 2020-01-01 05:57:57Z

1

You can use .filter() method:

let filteredUserID = this.form.get('person_id').value
this.ArrayB = this.ArrayA.filter(item => item.id == filteredUserID))

edited Jan 1, 2020 at 5:57

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

answered Dec 31, 2019 at 11:22

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Collectives™ on Stack Overflow

How to filter data in Angular view based on user input? [duplicate]

4 Answers 4

3 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Linked

Related