How to filter objects in nested arrays in JavaScript?

Question

How can I get all tasks by useId in JS? I'd like, when I click on user name, to get all todos which belong to this user. How can I get all tasks by useId in JS? I'd like, when I click on user name, to get all todos which belong to this user. How can I get all tasks by useId in JS? I'd like, when I click on user name, to get all todos which belong to this user.

"users":[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret"
},
{
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette"
},
{"id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha"
}
],

"todos":[
  {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  },
  {
    "userId": 3,
    "id": 2,
    "title": "quis ut nam facilis et officia qui",
    "completed": false
  },
  {
    "userId": 2,
    "id": 3,
    "title": "fugiat veniam minus",
    "completed": false
  },
  {
    "userId": 3,
    "id": 4,
    "title": "et porro tempora",
    "completed": true
  },
  {
    "userId": 2,
    "id": 5,
    "title": "laboriosam mollitia et enim quasi adipisci quia provident illum",
    "completed": false
  },
  {
    "userId": 1,
    "id": 6,
    "title": "qui ullam ratione quibusdam voluptatem quia omnis",
    "completed": false
  }]

import React, { useState, useEffect } from "react";
import Axios from "axios";
import { Link } from "react-router-dom";

function Users({ limit, match }) {
  const [users, setUsers] = useState([]);
  console.log(match);
  useEffect(() => {
    loadUsers();
  }, []);

  const loadUsers = async () => {
    const result = await Axios.get(`http://localhost:3004/users`);
    console.log(result);
    setUsers(result.data);
  };

  return (
    <div>
      {users.slice(0, limit).map((user) => (
        <Link to={`/users/${user.id}`}>
          <h1>{user.title}</h1>
        </Link>
      ))}
    </div>
  );
}

export default Users;


import React, { useState, useEffect } from "react";

function todos({ match }) {
  const [todos, settodos] = useState([]);
  console.log(match);

  useEffect(() => {
    loadtodos();
  }, []);
  const loadtodos = async () => {
    const result = await fetch(
      `http://localhost:3004/todos/${match.params.id}`
    );
    const todos = await result.json();
    settodos(todos);
    console.log(todos);
  };

  return <div>{todos.title}</div>;
}

export default todos;

Answer 1

There is no differences between ReactJs and vanilla javascript in this case, you could simply do a filter on the todos array, like that

todos.filter(todo => todo.userId === userId)

Or you can use a library like lodash to improve the safety and the readability of your code. (In your example you could use lodash.find(todos, todo => todo.userId === userId).

I hope this answer will help you !