Question 73188 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Filtered array always empty – Reactjs

I tried to do some filtering logic and get the members of the project im on ( according to its name on the url params ), but the problem is that it’s always empty as you can see below ( teamMembers is always empty even if i change the filtering condition to something obvious).
I also tried other methods instead of filter on the allUsers array, and they just fine somehow .

function Team({ setShowAddMembers }: props) {
    const params = useParams();
    const { projectName } = params;

    const [projectTeam, setProjectTeam] = useState<user[]>([]);

    useEffect(() => {
        try {
            const getProjectTeam = async () => {
                const allProjects: project[] = await getAllProjects();
                console.log(allProjects); // works. Logs projects array
                const allUsers: user[] = await getAllUsers();
                console.log(allUsers); // works. Logs users array

                // to get only the project of the page you're on
                const currentProject: project[] = allProjects.filter(
                    (project) => project.name === projectName
                );
                console.log(currentProject); // works as intended. Logs a 1 item array
                console.log(currentProject[0]); // works as intended 
                const { members } = currentProject[0];
                console.log(members); //works. Logs array of the members of the current project
                const teamMembers: user[] = allUsers.filter((user) =>
                    members.includes(user.username)
                );
                console.log(teamMembers); // DOES NOT WORK. LOGS EMPTY ARRAY
                setProjectTeam(teamMembers);
            };
            getProjectTeam();
        } catch (error) {
            console.log(error);
        }
    }, []);

console logs: ( in order just like in the code )

  • allProjects: [{…}, {…}, {…}, {…}, {…}, {…}, {…}] an array of 7 of this type of objects:
    {
        "tickets": [],
        "_id": "640f80cbd601d54a956de834",
        "desc": "Marketplace website",
        "name": "Market",
        "members": [
            "John Doe",
            "Dave Gray"
        ]
    }
  • allUsers: [{…}, {…}, {…}, {…}] an array of this type of objects:
{
    "_id": "640c6e87d8efde2fabbb1ba2",
    "username": "AdminDemo",
    "email": "[email protected]",
    "password": "$2b$10$7O7JZVgYW9k0dOXiAFtWv.jN7VVmoooPagOvnEnfEfSB7cTH0md/S",
    "role": "admin",
    "protected": true,
    "__v": 0
}
  • current project:
[
    {
        "tickets": [],
        "_id": "640f80cbd601d54a956de834",
        "desc": "Marketplace website",
        "name": "Market",
        "members": [
            "John Doe",
            "Dave Gray"
        ]
    }
]
  • currentProject[0]:
{
        "tickets": [],
        "_id": "640f80cbd601d54a956de834",
        "desc": "Marketplace website",
        "name": "Market",
        "members": [
            "John Doe",
            "Dave Gray"
        ]
    }
  • members:
["John Doe", "Dave Gray"]
  • teamMembers:
[]
Tags:

2

Answers


  1. 0

    Looks like you issue is that you try to compare members names e.g. John Doe with the username of a user e.g. AdminDemo in the way the examples are given I would bet that these will never match.

    I dont know how you build the username compared to the members name, if its only removes the space between first and last name you can do a hacky solution by just removing the spaces from the members name.

    const teamMembers: user[] = allUsers.filter((user) =>
    members.some(m => m.replace(" ", "") === user.userName)
);

    However would recommend to store userIds as members instead, to mitigate further issues in the future with user having the same name and so on.

    Login or Signup to reply.
  2. 0

    I think you could solve your problem by looking through your members (what I assume is a list of members.) And writing something in the lines of

    members.some(m => m.username === user.username);

    some looks through the array and returns if the condition retruns true, otherwise it returns false.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search