Filter angular table data by selecting dropdown values

Question

Here I have a JSON array

demoList = [ 
  { name:"asian003", model:"hyper20", class:"selina0127" },
  { name:"asian003", model:"hyper21", class:"selina0127" },
  { name:"norva", model:"hyper21", class:"gowri.14" },
  { name:"sparks007", model:"NNc22", class:"gowri.14" },
  { name:"asian003", model:"NNc22", class:"selina0127" }
]

This array showing in an HTML table using Angular. I want to add dropdowns separately such as name dropdown, model dropdown, class dropdown. When I select drop-down values I want to filter table records.

For example, if I select asian003 from name and selina0127 from class and do not select the value model dropdown, I want to get the below result into the table preview

demo1List = [
  {name:"asian003",model:"hyper20",class:"selina0127"},
  {name:"asian003",model:"hyper21",class:"selina0127"},
  {name:"asian003",model:"NNc22",class:"selina0127"}
]

pls consider this => For example, if I select asian003 from name and selina0127 from class and do not select the value model dropdown, I want to get the below result into the table preview — Jay
– Jay, Commented Aug 31, 2021 at 8:40

NeNaD · Accepted Answer · 2021-08-31 07:28:19Z

1

You can create and bind one property to each dropdown. Then on any dropdown change, you can call filter_demo_list() function:

const demoList = [ 
  { name:"asian003", model:"hyper20", class:"selina0127" },
  { name:"asian003", model:"hyper21", class:"selina0127" },
  { name:"norva", model:"hyper21", class:"gowri.14" },
  { name:"sparks007", model:"NNc22", class:"gowri.14" },
  { name:"asian003", model:"NNc22", class:"selina0127" }
]

public table_data;
public selected_name;
public selected_class;
public selected_model;

filter_demo_list() {
  this.table_data = demoList;
  if (this.selected_name) this.table_data.filter((item)=> item.name === this.selected_name);
  if (this.selected_class) this.table_data.filter((item)=> item.class  === this.selected_class);
  if (this.selected_model) this.table_data.filter((item)=> item.model === this.selected_model);
}

answered Aug 31, 2021 at 7:28

NeNaD

20.8k11 gold badges64 silver badges118 bronze badges

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

3 Comments

Jay Over a year ago

pls consider this => For example, if I select asian003 from name and selina0127 from class and do not select the value model dropdown, I want to get the below result into the table preview

NeNaD Over a year ago

My code covers that logic. As you can see, if this.selected_model is not selected, the last if condition will not be executed and the filter by model won't be applied.

Jay Over a year ago

I made some modifications. The code is worked.

Collectives™ on Stack Overflow

Filter angular table data by selecting dropdown values

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related