html 如何动态过滤Json对象？我的过滤条件是可变的，有太多的情况

2mbi3lxu 于 2022-12-09 发布在其他

关注(0)|答案(2)|浏览(109)

我想动态地过滤我的数据。但是我们的条件必须是动态的。我想在<select (change)="filterData($event.target.value,'jobStatusId')" >上调用这个方法。但是，jobStatusId是可以改变的。它可以是jobTypeId。我怎样才能使它动态呢？
我试试这个，比如说我有一个这样的数据;`

filteredData= [
     {
      "jobStatusId": 1,
      "jobTypeId": 2,
      "jobPriorityId": 3,

     },
     {
      "jobStatusId": 2,
      "jobTypeId": 3,
      "jobPriorityId": 3,
     },
     {
      "jobStatusId": 2,
      "jobTypeId": 3,
      "jobPriorityId": 4,
     }
]

还我写个法像;

filterData(id, condition: string) {
    this.filteredData = this.filteredData.filter(
      (a) => a.condition === id
    );
  }

在这个方法中，我们关注condition: string。condition可以是jobStatusId或jobTypeId或jobPriorityId。我想把它动态化。
比如说：当我调用like，filterData(2,jobStatusId)时，我的数据应该是：

{
      "jobStatusId": 2,
      "jobTypeId": 3,
      "jobPriorityId": 3,
     },
     {
      "jobStatusId": 2,
      "jobTypeId": 3,
      "jobPriorityId": 4,
     }

如果我这样叫它两次：

filterData(2,jobStatusId)
filterData(4,jobPriorityId)

那么，我的filteredData应该是：

{
      "jobStatusId": 2,
      "jobTypeId": 3,
      "jobPriorityId": 4,
     }

我怎样才能使它动态化呢？我怎样才能使它那样呢？如果你有更好的解决办法，你可以告诉我。但是我想在<select (change)="filterData($event.target.value,'jobStatusId')" >上调用这个方法

Html

来源：https://stackoverflow.com/questions/74737858/how-can-i-filter-dynamically-json-object-my-filter-condition-can-be-changeable

2条答案

按热度按时间

rdlzhqv91#

创建一个基于javascript对象的类型，如下所示：

// somewhere in your project
export type JobType = 'jobTypeId' | 'jobStatusId' | 'jobPriorityId';

然后，条件的类型将为JobType

filterData(id: number, condition: JobType): void {   
  const filtered = this.filteredData.filter(d => d[condition] === id);
  return filtered;
}

在模板HTML中，您需要发送与任何JobType值匹配的精确值，否则，Typescript将报告：

<!-- works -->
<select (change)=filtered($event.target.value, 'jobStatusId') >

<!-- doesn't work -->
<select (change)=filtered($event.target.value, 'invalid-value') >

赞(0）回复(0）举报 2022-12-09

c9x0cxw02#

我找到了一种使用if-else的方法，但是我真的很好奇。有没有动态的方法？我的解决方案：

if (condition === "jobPriorityId") {
      this.filteredData = this.filteredData.filter(
        (a) => a.jobPriorityId=== id
      );
    }
    if (condition === "jobStatusId ") {
      this.filteredData = this.filteredData.filter(
        (a) => a.jobStatusId === id
      );
    }
    if (condition === "jobTypeId ") {
      this.filteredData = this.filteredData.filter(
        (a) => a.jobTypeId === id
      );
    }

赞(0）回复(0）举报 2022-12-09

我来回答

html 如何动态过滤Json对象？我的过滤条件是可变的，有太多的情况

2条答案

相关问题

热门标签

最新问答