如何在javascript中的子数组数组和子数组数组之间进行过滤？

IT技术 javascript arrays node.js reactjs object
2021-05-21 15:04:41

我有两个对象数组。我想根据PermissionObj.

这是来自数据库。以下是permissionObj.

const PermissionObj = {
  permission: [
    {
      books: [
        {
          label: "Can View",
          value: "can_view"
        }
      ]
    },
    {
      Journals: [
        {
          label: "Can View",
          value: "can_view"
        },
        {
          label: "Can Create",
          value: "can_create"
        }
      ]
    },
    {
      deal: [
        {
          label: "Can update",
          value: "can_update"
        },
        {
          label: "Can delete",
          value: "can_delete"
        }
      ]
    }
  ]
}

这是静态数据。我想比较基于PermissionObj.

const data = [
  {
    label: "books",
    value: "can_view"
  },
  {
    label: "deal",
    content: [
      {
        value: "can_update"
      },
      {
        value: "can_delete"
      },
      { value: "can_view" }
    ]
  },
  {
    label: "Articles"
  },
  {
    label: "Journals",
    content: [
      {
        value: "can_create"
      },
      {
        value: "can_view"
      },
      {
        value: "can_delete"
      },
      {
        value: "can_edit"
      }
    ]
  }
]

我正在尝试根据对象数组过滤对象的数据数组PermissionObj。这是我的尝试代码。

const permKeys = PermissionObj.permission.flatMap(item => Object.keys(item));
const filteredData = data.filter(({ label }) => permKeys.includes(label));
console.log(filteredData);

这是我的问题，我遇到的是我不想得到can_edit，can_delete如果它与期刊中的权限对象不匹配。在我的许可对象中，日记中没有can_edit和can_delete。

我接受的输出将是这种格式：

const data = [
  {
    label: "books",
    value: "can_view"
  },
  {
    label: "deal",
    content: [
      {
        value: "can_update"
      },
      {
        value: "can_delete"
      }
    ]
  },
  {
    label: "Journals",
    content: [
      {
        value: "can_create"
      },
      {
        value: "can_view"
      }
    ]
  }
]
1个回答

可以使用reduce方法和应用逻辑来决定应该推送哪些数据：

const result = data.reduce((a, c) => {
   let filterObj = PermissionObj.permission.find(f => f[c.label]);
   if (filterObj) {
      if (c.value) {
         a.push(c);
      }
      if (c.content) {
         c.content = c.content.filter(f => filterObj[c.label]
             .some(s => s.value.toLowerCase() == f.value.toLowerCase()));
         a.push(c);
      }
   }
   return a;
},[])

一个例子：

const PermissionObj = {
   permission: [
   {
      "books": [
         {
            "label": "Can View",
            "value": "can_view"
         }
      ]
   },
   {
      "Journals": [
         {
            "label": "Can View",
            "value": "can_view"
         },
         {
            "label": "Can Create",
            "value": "can_create"
         }
      ]
   },
   {
      "deal": [
         {
            "label": "Can update",
            "value": "can_update"
         },
         {
            "label": "Can delete",
            "value": "can_delete"
         }
      ]
   }
 ]
};

const data = [
   {
      label: "books",
      value: "can_view"
   },
   {
      label: "deal",
      content: [
         {
         value: "can_update"
         },
         {
            value: "can_delete"
         },
         {
            value:"can_view"
         }
      ]
   },
   {
      label: "Articles",
   },
   {
      label: "Journals",
      content: [
         {
            value: "can_create"
         },
         {
            value: "can_view"
         },
         {
            value: "can_delete"
         },
         {
            value: "can_edit"
         }
      ]
   }
];


const result = data.reduce((a, c) => {
   let filterObj = PermissionObj.permission.find(f => f[c.label]);
   if (filterObj) {
      if (c.value) {
         a.push(c);
      }
      if (c.content) {
         c.content = c.content.filter(f => filterObj[c.label].some(s => s.value.toLowerCase() == f.value.toLowerCase()));
         a.push(c);
      }
   }
   return a;
},[])
console.log(result);

其它你可能感兴趣的问题
上一篇使用 Gatsby 从富文本组件中将 Markdown 转换为 HTML 下一篇如何在ant-d上传中为removeFile添加PopConfirm图片文件