【问题标题】:How to filtering array of objects to another array of objects in javascript? [closed]如何在javascript中将对象数组过滤为另一个对象数组? [关闭]
【发布时间】:2020-07-04 20:30:28
【问题描述】:

我有两个对象数组。我想根据 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 对象数组 过滤 对象数据数组。这是我尝试的代码。

let permission = PermissionObj.permission 

permission.filter(item=>{
  // I am finding data label by using permission label.

 let dataItem = data.find(index=>item[index.label])

 console.log(dataItem)

})

  // the problem is that I want to filtering based on value .

  // if both of value is true , then show the data . 

如果 PermissionObj 值将与数据值匹配。然后显示数据。
我接受的输出将是这种格式:

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"
   },


  ]
 }
]

【问题讨论】:

  • 我看到输出未定义
  • filter 返回一个数组,所以你需要将它分配给一个变量let filtered = permission.filter...
  • 你看这个。我真的很麻烦这个问题

标签: javascript arrays node.js reactjs object


【解决方案1】:

来自 PermissionObj 的第一个构建 keys。对标签包含在keys 中的数据数组使用过滤器。

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"
      }
    ]
  },
  {
    label: "Articles"
  },
  {
    label: "Journals",
    content: [
      {
        value: "can_create"
      },
      {
        value: "can_view"
      }
    ]
  }
];

const perm = {};
PermissionObj.permission.forEach(item =>
  Object.entries(item).forEach(([key, values]) => {
    perm[key] = values.map(x => x.value);
  })
);

const updated = data
  .map(item => {
    const newItem = {
      ...item
    };
    if (item.content) {
      newItem.content = item.content.filter(x =>
        perm[item.label].includes(x.value)
      );
    } else if (item.value) {
      newItem.value = perm[item.label].includes(item.value) ? item.value : "";
    }
    return newItem;
  })
  .filter(x => x.content || x.value);

console.log(updated);

【讨论】:

  • 如果我的数据添加额外的两个值会出现一些问题 例如:{ label: "Journals", content: [ { value: "can_create" }, { value: "can_view" }, { value : "can_edit" },{ value: "can_delete" } ] } ,但我不想看到 can_delete 和 can_edit 因为权限不携带 can_delete, can_edit 在 journals 中。我想用数据来比较permissionobj。
  • 我更新了我的代码。你能再看看吗
  • @sujon,哦,知道了,我刚刚更新了答案。希望对您有所帮助。
  • 如果我基于此对象进行过滤,我会遇到问题 const PermissionObj = { permission: [ { books: [ { label: "Can View", value: "can_view" } ] } ] };我可以看到有一个未定义的包含
  • 我刚刚使用 && 运算符 perm[item.label] && perm[item.label].includes(x.value) 解决了这个问题。但是,如果我根据这种格式进行过滤,我将面临另一个问题 const PermissionObj = { permission: [ { books: [ { label: "Can View", value: "can_view" } ] } ] };我只想在数据 [{label:"books",value:"can_view"}] 中查看这个对象数组。但是,我可以看到这种格式 [{label:"books",value:"can_view"}, {label:"deal",content:[]}, {label:"Journals", content: []}]跨度>
【解决方案2】:

所以您可以获得permission 数组的keys,这将为您提供一个键数组。因为您正在获取对象数组中某个项目的keys,因此key 将始终是第一项,然后您可以使用该键检查每个数据项

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"
        }
      ]
    },
    {
      label: "Articles"
    },
    {
      label: "Journals",
      content: [
        {
          value: "can_create"
        },
        {
          value: "can_view"
        }
      ]
    }
  ];
  
    let permission = PermissionObj.permission;
    let NewData = [];
    permission.filter(item => {
      let ObjectKeys = Object.keys(item);
      let ObjKey = ObjectKeys[0];
      let DATA = data.find(
        dataItem => dataItem.label.toString() === ObjKey.toString()
      );
      NewData.push(DATA);
    });
    console.log(NewData);

【讨论】:

  • 如果我的数据添加额外的两个值会出现一些问题 例如:{ label: "Journals", content: [ { value: "can_create" }, { value: "can_view" }, { value : "can_edit" },{ value: "can_delete" } ] } ,但我不想看到 can_delete 和 can_edit 因为权限不带有 can_delete, can_edit 。
  • 我更新了我的代码。你能再看看吗
猜你喜欢
  • 1970-01-01
  • 2021-10-16
  • 1970-01-01
  • 1970-01-01
  • 2020-01-27
  • 2020-07-18
  • 1970-01-01
  • 2023-02-20
相关资源
最近更新 更多