如何在 Angular 中为嵌套的 JSON 对象使用搜索过滤器？

Posted 2023-03-11

【中文标题】如何在 Angular 中为嵌套的 JSON 对象使用搜索过滤器？

【英文标题】：How to use search filter in Angular for nested JSON object?

【发布时间】：2019-10-04 09:16:37

【问题描述】：

我正在从我的猫鼬中获取数据以显示在我的 html 表格上。我可以正常过滤 JSON 对象，但无法过滤嵌套的 JSON 对象？

我已经使用“npm i ng2-search-filter --save”来导入过滤管道，但这仅适用于第一级。不对嵌套的 JSON 对象进行过滤。

我的 JSON 对象是：

    packageName:test,
    packagePrice:200,
    userid:
        userName:John,
        userAge: 27
    

---

     <input type="text" class="form-control" [(ngModel)]="searchtext" 
     placeholder="Search">

      <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col">Package Name</th>
          <th scope="col">Package Price</th>
          <th scope="col">Customer Name</th>
          <th scope="col">Customer Age</th>
        </tr>
      </thead>
      <tbody *ngFor="let use of user | filter:searchtext">
        <tr class="table-active">
          <td> use.packageName</td>
          <td>use.packagePrice</td>
          <td>use.userid.userName</td>
          <td>use.userid.userAge</td>       
        </tr>
      </tbody>
    </table>

当我在文本框中输入 packageName 和 packagPrice 进行搜索过滤时，它会过滤掉并显示正确的结果，但在 userName 和 userAge 上它不起作用。 请帮忙。 谢谢。

【问题讨论】：

现在这个功能在ng-search-filter的最新版本中可用

@PrashantPimpale 尝试将其粘贴到我的 node_module 中，但没有用

你使用了哪个命令？

@PrashantPimpale 以前我使用这个命令 ng2-search-filter 安装，然后我只是用来自github.com/solodynamo/ng2-search-filter/releases/tag/0.4.9这个链接的 rar 文件替换了 ng2-search-filter 的现有 node_module 文件/跨度>

@PrashantPimpale 这是我的错误，我安装了错误版本的软件包，这导致了问题。我安装了最新的现在它工作正常。非常感谢：D

【参考方案1】：

试试下面的：-

function getResult(filterBy, objList) 
return objList.hightlights.filter(function(obj) 
return obj.queries.some(function(item)
 return item.indexOf(filterBy) >= 0;
);
);

【讨论】：

我应该把这个粘贴到哪里？

您应该根据您的代码进行编辑，这是您应该根据您的要求编辑的一种示例

@Shubham 这行不通！他正在使用第三方库ng2-search-filter

【参考方案2】：

您可以为此使用custom search pipe

我在Stackblitz上创建了演示

searchPipe.ts

transform(value: any, searchText?: any): any 
    if(!value) return [];
    if(!searchText) return value;
    searchText = searchText.toLowerCase();
    return value.filter( it => 
      return it.packageName.toLowerCase().includes(searchText) || it.packagePrice.toString().includes(searchText) || (it.userid &&  it.userid.userAge.toString().includes(searchText) || it.userid.userName.toLowerCase().includes(searchText));
    );

component.html

<tr class="table-active" *ngFor="let use of user | search:searchtext">
    <td> use.packageName</td>
    <td>use.packagePrice</td>
    <td>use.userid.userName</td>
    <td>use.userid.userAge</td>       
</tr>

【参考方案3】：

我通过安装最新版本 ng2 search filter 解决了这个问题。

运行以下命令：

npm i ng2-search-filter@0.5.1