解析Javascript对象以显示分层链接目录

如何解决解析Javascript对象以显示分层链接目录

我正在尝试使普通javascript解析多嵌套对象，然后显示输出。它类似于目录结构，但对于链接，用户选择顶级框，然后选择顶级框内部的下一个子级框，依此类推。

How the process works (image)

var p = {
"Item1":     
{
    "displayicon": "Item1-display","url": "https://stackoverflow.com","child":{
        "Item1.1":     
        {
            "displayicon": "Item1.1-display","url": "https://www.google.com","child": "value1"
        },"Item1.2": 
        {
            "displayicon": "Item1.2-display","url": "https://www.w3schools.com","child": { 
                    "Item1.2.1":     
                    { 
                    "display": "Item1.2.1-display","url": "http://www.google.com",}      
            }        
        }
    }
},"Item2": 
{
    "displayicon": "Item2-display",},"Item3":
{
    "displayicon": "Item3-display",}
};


 //// this will navigate top level

for (var key in p) {
  if (p.hasOwnProperty(key)) {
    console.log(key + " -> " + p[key].displayicon + " and " + p[key].url);
 }
}

 /// this navigate child levels ... 

 var xselected = 'Item1';

 for (var key in p[xselected].child) {
  if (p[xselected].child.hasOwnProperty(key)) {
    console.log(key + " -> " + p[xselected].child[key].displayicon + " and " + 
  p[xselected].child[key].url);
  }
 }

如何使它导航子子级？ JSON可以是任何结构，只要满足该流程图像即可。我打算使用对象中的“ displayicon”来显示图像，当您单击图像时，它会将您带到该部分的子项中。但是，当您单击URL时，它将带您到网站。还有一个后退按钮，可以上一级。

我已经在互联网上搜索了普通的javascript代码，但找不到任何内容。

任何帮助将不胜感激。

谢谢

解决方法

您可以通过它简化工作。

path