Javascript - マップまたはフィルタを使用して値の存在に基づいて配列メンバのサブセットを返す

Question

私はSOの周りを探していましたが、これらのコンセプトに関する多くの情報がありますが、これらすべてのアイデアは私の問題を満たすために一緒に。

[ 
    { 
    route: ["", "scheduler"], 
    name: "scheduler", 
    settings: { 
     icon: "user", 
     auth: true, 
     roles: ["Employee", "Admin"], 
     pos: "left" 
    }, 
    moduleId: PLATFORM.moduleName("../components/scheduler/scheduler"), 
    nav: true, 
    title: "scheduler" 
    }, 
    { 
    route: "jobs", 
    name: "jobs", 
    moduleId: PLATFORM.moduleName("../components/jobs/jobsList"), 
    settings: { 
     icon: "list", 
     auth: true, 
     roles: ["Employee"], 
     pos: "left" 
    }, 
    nav: true, 
    title: "Jobs" 
    }, 
    { 
    route: "clients", 
    name: "clients", 
    moduleId: PLATFORM.moduleName("../components/clients/clientList/clientList"), 
    title: "Clients", 
    nav: true, 
    settings: { 
     nav: [ 
     { 
      icon: "list", 
      route: "clients/ClientsList", 
      name: "clientList", 
      moduleId: PLATFORM.moduleName(
      "../components/clients/clientList/clientList" 
     ), 
      href: "#clients/clientsList", 
      title: "Client List", 
      roles: ["Employee", "Admin"] 
     }, 
     { 
      icon: "user", 
      route: "clients/create", 
      name: "aboutTeam", 
      moduleId: PLATFORM.moduleName(
      "../components/clients/clientCreate/clientCreate" 
     ), 
      href: "#clients/Create", 
      title: "Create Client", 
      roles: ["Employee", "Admin"] 
     } 
     ], 
     icon: "user", 
     auth: true, 
     roles: ["Employee", "Admin"], 
     pos: "left" 
    } 
    }, 
    { 
    route: "clients/ClientsList", 
    name: "clientList", 
    moduleId: PLATFORM.moduleName("../components/clients/clientList/clientList"), 
    settings: { 
     icon: "list", 
     auth: true, 
     roles: ["Employee", "Admin"], 
     pos: "left" 
    } 
    }, 
    { 
    route: "clients/create", 
    name: "aboutTeam", 
    moduleId: PLATFORM.moduleName("../components/clients/clientCreate/clientCreate"), 
    settings: { 
     icon: "user", 
     auth: true, 
     roles: ["Employee", "Admin"], 
     pos: "left" 
    } 
    }, 
    { 
    route: "companyDetail", 
    name: "companyDetail", 
    moduleId: PLATFORM.moduleName("../components/administration/companyDetail/companyDetail"), 
    settings: { 
     icon: "list", 
     auth: true, 
     roles: ["Employee", "Admin"], 
     pos: "left" 
    }, 
    nav: true, 
    title: "Company Detail" 
    }, 
    { 
    route: "user", 
    name: "user", 
    moduleId: PLATFORM.moduleName("../components/administration/user/user"), 
    settings: { 
     icon: "user", 
     auth: true, 
     roles: ["Employee", "Admin"], 
     pos: "right" 
    }, 
    nav: true, 
    title: "User" 
    }, 
    { 
    route: "notFound", 
    name: "notFound", 
    settings: { auth: false }, 
    moduleId: PLATFORM.moduleName("../components/notFound/notFound"), 
    nav: false, 
    title: "Not Found" 
    } 
] 

各1は、ロールの配列が存在する設定オプションがあります。

は、私は配列を持っています。

メンバーが「管理者」の役割を果たしていたかどうかを確認し、それを「プッシュ」と言う新しいアレイに追加するかどうかをチェックしたいと思っていました。

しかし、私はJavaScriptを学び、自分の知識を広げようとしています。私は "マップ"と "太い矢印"のオプションを使用してコードを合理化して、ロールにadminというuserRoleが含まれていたすべてのアイテムを含む新しい配列を作成すると思った。

これは私の試みです：

console.log(this.menu.map(r => r.filter(f => f.settings.roles === userRole))); 

フル機能が

public userMenu(userName: string, userRole: string): any { 
const fullMenu = this.menuList(); 
console.log("userRole: ", userRole); 
console.log(this.menu.map(r => r.filter(f => f.settings.roles === userRole))); 
} 

"USERROLE" が存在するとディスプレイコンソールではなく、私はこのエラーを取得しています：

Uncaught TypeError: Cannot read property 'map' of undefined

どのようにマップ関数を構造化して、ロール配列の一部として "Admin"を持つアイテムだけを返すようにするのですか？上記のより大きい配列。

Answer 1

I wanted to loop through each array member to check if, say, the member was in the role of "Admin" and then add it to a new array using say "push".

filter自分で新しい配列を作成する必要はありませんので、map機能は、新しい配列を返します。あなたは、配列をループする必要がある場合は、代わりに

Uncaught TypeError: Cannot read property 'map' of undefined

のみのアレイで使用することができます

• map console.log(this.menu.map(r => r.filter(f => f.settings.roles === userRole)));

  this.menu

  、filter、reduceを設定し、あなたのコードを表示してくださいforEachを使用しています。上記のコードは

• f.settings.roles === userRole（menuがオブジェクトの配列であるように）あなたがr、オブジェクトに対してfilterを使用することを示す：USERROLEが文字列が、settings.rolesそのまま使用する配列あなたはincludes（又はindexOf）を使用する必要がありそうですあなただけの、条件を満たして項目をフィルタfilterを使用すると、フィルタ

の条件は、この

menu.filter(r => r.settings.roles && r.settings.roles.includes('Admin'))

のように、十分です