In which elements is the selected element?

Question

I have an array. The elements in the array represent the menu elements. I want to create "breadcrumb" according to the menu item I selected. However, it provides errors dynamically after 3 depth while working.

// My Array

const menuArray = [{
    "label": "Dashboard"
  },
  {
    "label": "Products",
    "items": [{
        "label": "All Products"
      },
      {
        "label": "New Product"
      },
      {
        "label": "Product Categories"
      }
    ]
  },
  {
    "label": "Posts",
    "items": [{
        "label": "All Posts"
      },
      {
        "label": "New Post"
      },
      {
        "label": "Post Categories"
      }
    ]
  },
  {
    "label": "Sliders"
  },
  {
    "label": "Settings",
    "items": [{
        "label": "General Settings"
      },
      {
        "label": "User",
        "items": [{
            "label": "Your Profile"
          },
          {
            "label": "Edit Profile"
          }
        ]
      },
      {
        "label": "Social Settings"
      },
      {
        "label": "Link Settings"
      }
    ]
  }
];

// The function I experiment with
writeParent(event, arr) {

  let ct = 0;
  let found = false;
  let parentsLine = [];

  arr.some((e) => {
    parentsLine = [];
    let curr = e;
    for (curr; curr.items != null; curr = curr.items[0]) {
      if (event.label == curr.label) {
        found = true;
        return true;
      }
      parentsLine.push(curr.label);

    }

    if (event.label == curr.label) {
      found = true;
      return true;
    }


  });
  if (found) {
    return parentsLine;
  } else {
    return 'ERR: elm not found';
  }
}


console.log(writeParent({
  "label": "Edit Profile"
}, menuArray));

For example, if the element I selected is;

{
  "label": "New Post"
}

I want to get;

[
  {
    "label": "Posts"
  },
  {
    "label": "New Post"
  }
]

or

if the element I selected is;

{
  "label": "Edit Profile"
}

I want to get;

[
  {
    "label": "Settings"
  },
  {
    "label": "User"
  },
  {
    "label": "Edit Profile"
  }
]

I didn't know how to find the parent of the selected element. How can I do that?

Answer 1

I've solved the problem.

menuArray = [{
    "label": "Dashboard"
  },
  {
    "label": "Products",
    "items": [{
        "label": "All Products"
      },
      {
        "label": "New Product"
      },
      {
        "label": "Product Categories"
      }
    ]
  },
  {
    "label": "Posts",
    "items": [{
        "label": "All Posts"
      },
      {
        "label": "New Post"
      },
      {
        "label": "Post Categories"
      }
    ]
  },
  {
    "label": "Sliders"
  },
  {
    "label": "Settings",
    "items": [{
        "label": "General Settings"
      },
      {
        "label": "User",
        "items": [{
            "label": "Your Profile"
          },
          {
            "label": "Edit Profile"
          }
        ]
      },
      {
        "label": "Social Settings"
      },
      {
        "label": "Link Settings"
      }
    ]
  }
];

function find(array, event) {
    if (typeof array != 'undefined') {
      for (let i = 0; i < array.length; i++) {
        if (array[i].label == event.label) return [event.label];
        let a = this.find(array[i].items, event);
        if (a != null) {
          a.unshift(array[i].label);
          return a;
        }
      }
    }
    return null;
}

console.log(find(menuArray, { "label": "Edit Profile" }));