通过键值过滤对象数组?

时间:2021-03-03 07:34:02

标签: javascript reactjs react-native

我的问题陈述是,我想用以下条件过滤我的数组对象

  1. 将父子(subarr)对象的路由ID与映射对象进行匹配。如果 routeid 与映射对象不匹配,则将其消除。
  2. 如果我们在父对象中找到任何键 default:true ,它将到达顶部(基本上对数组对象进行排序)。
  3. 如果我们在 subarr 对象中的 default:true 中找到任何键,则该对象将作为父对象复制并传递到主数组的顶部。

我已尝试实施,但没有得到任何解决方案。请提出任何解决方案

这里是我的代码:

import React, { useState, useEffect } from "react";
import { View, Text } from "react-native";
const data1 = [
  {
    id: 1,
    title: "Dashboard",
    route: "Dashboard",
    routeid: 1,
    key: "dashboard",
    icon: "home",
    subarr: [],
    //default: true,
  },
  {
    id: 5,
    title: "Components",
    key: "Components",
    route: "component",
    routeid: 5,
    icon: "notebook",
    subarr: [
      {
        id: 6,
        route: "Card",
        key: "card",
        icon: "i-card",
        routeid: 6,
        title: "Card",
      },
      {
        id: 7,
        title: "Button",
        route: "Button",
        routeid: 7,
        key: "button",
        icon: "control-play",
        default: true,
      },
    ],
  },
  {
    id: 10,
    title: "notifications",
    route: "User",
    key: "user",
    routeid: 10,
    icon: "bell",
    subarr: [],
    //default: true,
  },
  {
    id: 11,
    title: "User profile",
    route: "Profile",
    routeid: 11,
    key: "profile",
    icon: "user",
    subarr: [],
  },
  {
    id: 12,
    title: "Carousel",
    route: "Carousel",
    key: "carousel",
    routeid: 12,
    icon: "layers",
    subarr: [],
  },
];
const mapping = {
  1: "dashboard",
  2: "pages",
  3: "tab",
  4: "test",
  5: "component",
  6: "card",
  7: "button",
  8: "table",
  9: "chart",
  //10: "user",
  11: "profile",
  12: "carousel",
};
function TestScreen() {
  const [exists, setExists] = useState([], {});
  const [flag, setFlage] = useState(false);
  const [subArr, setSubArr] = useState([]);
  useEffect(() => {
    let exists = [];

    data1.map((parent, id) => {
      if (parent.subarr.length > 0) {
        let newChild = [];
        parent.subarr.map((child, i) => {
          if (Object.keys(mapping).includes(child.routeid.toString())) {
            // const data = el.subarr.push(el2);
            //console.log("dada", el2);
            newChild.push(child);
            console.log("newChild", newChild);
          }
          parent.subarr = newChild;
        });
      } else {
        if (Object.keys(mapping).includes(parent.routeid.toString())) {
          console.log("Filtered parents", parent);

          exists = [
            ...exists,
            {
              icon: parent.icon,
              id: parent.id,
              key: parent.key,
              route: parent.route,
              routeid: parent.routeid,
              subarr: parent.subarr,
              title: parent.title,
            },
          ];
        }
   
      }
      exists = [
        ...exists,
        {
          icon: parent.icon,
          id: parent.id,
          key: parent.key,
          route: parent.route,
          routeid: parent.routeid,
          subarr: parent.subarr,
          title: parent.title,
        },
      ];
    });

    // const sortArr = exists.sort((a, b) => !a.default - !b.default);
    //console.log("new Arr", exists);
    setExists(exists);
  }, []);
  console.log("updated", JSON.stringify(exists));
  return (
    <View>
      {exists.map((exist, id) => {
        return (
          <View style={{ display: "flex" }} key={id}>
            <Text>{exist.routeid}</Text>
          </View>
        );
      })}
    </View>
  );
}

export default TestScreen;

0 个答案:

没有答案
相关问题