3级菜单 json数据

在编写 Web 应用程序时，有时需要使用菜单来提供导航。菜单可以是简单的一级菜单，也可以是多级菜单。当我们需要使用多级菜单时，可以使用 JSON 数据来生成菜单。

{
  "menu": {
    "home": {
      "text": "首页","url": "/"
    },"about": {
      "text": "关于我们","url": "/about"
    },"blog": {
      "text": "博客","submenu": {
        "page1": {
          "text": "页面1","url": "/blog/page1"
        },"page2": {
          "text": "页面2","url": "/blog/page2"
        }
      }
    }
  }
}

上述代码是一个包含三个一级菜单和一个二级菜单的 JSON 数据。一级菜单包含文本和链接，而二级菜单包含子菜单。

要在 HTML 页面中使用这个菜单，可以使用 JavaScript 代码来解析 JSON 数据并生成菜单。以下是一个示例代码：

var menu = document.getElementById("menu");
var data = JSON.parse(jsonData);

for (var key in data.menu) {
  var item = document.createElement("li");
  var text = document.createElement("a");
  text.href = data.menu[key].url;
  text.innerHTML = data.menu[key].text;

  item.appendChild(text);

  if (data.menu[key].submenu) {
    var submenu = document.createElement("ul");

    for (var subkey in data.menu[key].submenu) {
      var subitem = document.createElement("li");
      var subtext = document.createElement("a");
      subtext.href = data.menu[key].submenu[subkey].url;
      subtext.innerHTML = data.menu[key].submenu[subkey].text;

      subitem.appendChild(subtext);
      submenu.appendChild(subitem);
    }

    item.appendChild(submenu);
  }

  menu.appendChild(item);
}

通过使用以上代码，我们可以将 JSON 数据中定义的菜单生成为一个 HTML 菜单。