In this project , i want to check the path with all nested elements inside the Items and want to assign that in details .

But as per the function defined inside useEffect i am not able to check with nested items.

The thing is , i want to check the path, which coming from useParams with every objects inside the Items including nested objects and want to get the data related to that selection

import { useParams } from 'react-router-dom'
import { useState, useEffect } from 'react'; 
import Items from '../../Data/sidebar.json'


    function MainPage() {

        const { path } = useParams()
        console.log(path); //getting the path in console

        **const [data, setData] = useState([])**
    
        useEffect(() => {

            // console.log(Items); *//getting all nested array items*
            
            const details = Items.flat().find((i)=>i.path===(`/${path}`))
            setData(details)
    
        }, [path])
    
    
        console.log(data); //here not getting the values of nested objects
    
        return (
            <div>
    {.......somthing.......}
            </div>
        )
    }
    
    export default MainPage

for the reference purpose I am attaching the Items.json

[
  {
    "title": "Introduction",
    "path": "/"
  },
  {
    "title": "The Basics",
    "childrens": [
      {"id":"1",
        "title": "API basics",
        "path": "/api-basics"
      },
      {
        "title": "Account API Authentication",
        "path": "/account-api-authentication"
      }
    ]
  },
  {
    "title": "System Preparation",
    "childrens": [
      {
        "title": "Branding",
        "path": "/branding"
      },
      {
        "title": "None",
        "childrens": [
          {
            "title": "No data",
            "path": "/nodata"
          },
          {
            "title": "No data 1",
            "childrens": [
              {
                "title": "Integration",
                "path": "/integration"
              },
              {
                "title": "Subscription",
                "path": "/subscription"
              }
            ]
          },
          {
            "title": "Notifications",
            "path": "/notification"
          }
        ]
      }
    ]
  },
  {
    "title": "Support",
    "path": "/support"
  },
  {
    "title": "Help",
    "path": "/help"
  }
]

CodePudding user response：

I hope this answer will help, you can check the path with infinite childerens.

const Items = [
  {
    title: "Introduction",
    path: "/",
  },
  {
    title: "The Basics",
    childrens: [
      { id: "1", title: "API basics", path: "/api-basics" },
      {
        title: "Account API Authentication",
        path: "/account-api-authentication",
      },
    ],
  },
  {
    title: "System Preparation",
    childrens: [
      {
        title: "Branding",
        path: "/branding",
      },
      {
        title: "None",
        childrens: [
          {
            title: "No data",
            path: "/nodata",
          },
          {
            title: "No data 1",
            childrens: [
              {
                title: "Integration",
                path: "/integration",
              },
              {
                title: "Subscription",
                path: "/subscription",
              },
            ],
          },
          {
            title: "Notifications",
            path: "/notification",
          },
        ],
      },
    ],
  },
  {
    title: "Support",
    path: "/support",
  },
  {
    title: "Help",
    path: "/help",
  },
];

const findDetails = (data, path) => {
  try {
    const itemData = data ? data : Items;
    for (const obj of itemData) {
      if (obj.path === path) {
        return obj;
      } else {
        if (obj.hasOwnProperty("childrens") && obj.childrens.length > 0) {
          const data =  nestedCheck(obj, path);
          if (data) {
            return data;
          }
        }
      }
    }
  } catch (err) {
    console.log(err);
  }
};

const nestedCheck = (object, path) => {
  if (object && object.childrens.length) {
    for (const obj of object.childrens) {
      if (obj.path === path) {
        return obj;
      } else {
        if (obj.hasOwnProperty("childrens") && obj.childrens.length > 0) {
          const data = nestedCheck(obj, path);
          if (data) {
            return data;
          }
        }
      }
    }
  }
};
const details = () => {
  let details = findDetails(Items, "/integration");
  console.log(details, "details");
};

details();

CodePudding user response：

    const [data, setData] = useState([])
    
 useEffect(() => {
    
            let result;
    
            const nextFunction = (e) => {
                if (e.path == `/${path}`) {
                    result = e
                }
                else if (e.childrens && e.childrens.length) {
                    e.childrens.forEach((item) => {
                        nextFunction(item)
                    })
                }
            }
            Items.forEach((item) => {
                nextFunction(item)
            })
            setData(result)
    
        }, [path])
    
        console.log(data); //Now I am getting the values