通过嵌套值过滤对象数组

Question

我正在尝试过滤此对象数组，并保留原始对象放在一边。

{"departments":
 [
  {
    “name": “AAA",
    “selected”: true,            
    "courses": [
        {
            "name": “course1",
            “selected”: true,
            “titles”: 
            [{
              "name": “title1",
              “selected”: true
             },
             {
             "name": “title2",
             “selected”: false
            }]
         },
         {
            "name": “course2",
            “selected”: false,
            “titles”: 
            [{
              "name": “title1",
              “selected”: false
             }]   
          }
    ]
 },
 {
    “name": “BBB",
    “selected”: false,
    "courses": [{...}]

 {...}    
 ]
}

我想找到所有选定的部门，课程和职务。 并且应该采用相同的格式。 我尝试使用下面的代码，但它更改了原始数据。 我也想保留这一点。

const depts = departments.filter((dept: any) => {
    if (dept.selected) {
      dept.courses = dept.courses.filter((course: any) => {
        if (course.selected) {
          if (course.titles) {
            course.titles = course.titles.filter(({selected}: any) => selected);
          }
          return true;
        }
        return false;
      });
      return true;
    }
    return false;
  });

在这种情况下，什么是最佳解决方案？

Answer 1

您的过滤逻辑似乎是正确的。 唯一的问题是代码会更改原始数组。 为了克服这个问题，只需创建一个原始数组的深克隆并对其运行过滤逻辑

  filterArray() {
    const clone = JSON.parse(JSON.stringify(this.departments));
    const depts = clone.filter((dept: any) => {
      if (dept.selected) {
        dept.courses = dept.courses.filter((course: any) => {
          if (course.selected) {
            if (course.titles) {
              course.titles = course.titles.filter(({ selected }: any) => selected);
            }
            return true;
          }
          return false;
        });
        return true;
      }
      return false;
    });

    console.log(depts);
  }

这是一个演示https://stackblitz.com/edit/angular-xx1kp4

Answer 2

较短的替代方法是使用JSON.parse reviver参数 ：

 var arr = [{ name: "AAA", selected: true, courses: [{name: "course1", selected: true, titles: [{ name: "title1", selected: true }, { name: "title1", selected: false }]}, { name: "course2", selected: false, titles: [{ name: "title1", selected: false }]}]}] var result = JSON.parse(JSON.stringify(arr), (k, v) => v.map ? v.filter(x => x.selected) : v) console.log( result ) 

Answer 3

 const filterSelected = obj => { return { ...obj, departments: obj.departments.map(dep => { return { ...dep, courses: dep.courses.map(course => { return { ...course, titles: course.titles.filter(title => title.selected), }; }).filter(course => course.selected), }; }).filter(dep => dep.selected), }; } const all = { departments: [ { name: "AAA", selected: true, courses: [ { name: "course1", selected: true, titles: [ { name: "title1", selected: true }, { name: "title1", selected: false } ] }, { name: "course2", selected: false, titles: [ { name: "title1", selected: false } ] }, ] } ] }; console.log(filterSelected(all)); 

Answer 4

我不知道您是否更喜欢API假。 这是我的提示：

您可以使用API​​ Json Server。

安装JSON服务器

npm install -g json-server

使用一些数据创建一个db.json文件

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

启动JSON服务器

json-server --watch db.json

现在，如果您转到http://localhost:3000/posts/1 ，您将获得

{ "id": 1, "title": "json-server", "author": "typicode" }

您可以使用各种形状搜索对象数组，并将其过滤。 有关API的更多信息，请访问： https : //github.com/typicode/json-server

（使用过滤器在Angular上进行搜索，它会带给您所需的内容，并在组件内部使用方法）