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 parameter：

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服务器

Line 1: 1    2    3 Tab detected, whitespace detected
Line 2: 1    2    3 No error
Line 3: 1 Missing carriage return No error
Number of Lines: 3
Numbers in Line 1: 3
Numbers in Line 2: 3
Numbers in Line 3: 1

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

Line 1:  1  3   2White Space Detected, tab detected, White Space Detected, 
Line 2:  1  3   2No Error
Line 3:  0Missing carriage returnNo Error
Number of lines: 3Numbers in Line 1: 3Number of lines: 3Numbers in Line 2: 3Numb

启动JSON服务器

npm install -g json-server

现在，如果您去{ "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ], "profile": { "name": "typicode" } }，您将会得到

json-server --watch db.json

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

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

通过嵌套值过滤对象数组

4 个答案: