How to get value related datas from an array of objects (nested) in javascript?

Question

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"
  }
]

Answer 1

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 = async (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 = await nestedCheck(obj, path); if (data) { return data; } } } } } catch (err) { console.log(err); } }; const nestedCheck = async (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 = await nestedCheck(obj, path); if (data) { return data; } } } } } }; const details = async () => { let details = await findDetails(Items, "/integration"); console.log(details, "details"); }; details();

Answer 2

    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