如何使用外部Json文件和javascript和HTML制作动态菜单栏

How to make a dynamic Menu bar using External Json file and javascript and HTML?

本文关键字：动态 菜单栏 HTML javascript 外部 Json 文件 何使用      更新时间：2023-09-26

我想在外部JSON的帮助下创建一个动态菜单栏。如何创建一个Html代码调用JSON并使其动态?如何读取JSON文件?

//JSON File = Menu.Json
{"data":    [{"id": "1",
    "text": "File",
    "Groupid": "-1",
    "subMenUWidth": '250px' },
   { "id": "2",
    "text": "Edit",
    "Groupid": "-1",
    "subMenUWidth": '250px' },
    {  "id": "3",
    "text": "New",
    "Groupid": "3",
    "href": "#"},
 {   "id": "4",
    "text": "OpenFile",
    "Groupid": "3",
    "href": "#"},
    {  "id": "5",
    "text": "Save",
    "Groupid": "3",
    "href": "#"},
    {    "id": "6",
    "text": "SaveAs",
    "Groupid": "3",
    "href": "#" },
    {   "id": "7",
    "text": "Undo",
    "Groupid": "4",
    "href": "#" },
  {  "id": "8",
    "text": "Redo",
    "Groupid": "4",
    "href": "#"},
    {  "id": "9",
    "text": "Cut",
    "Groupid": "4",
    "href": "#"},
   { "id": "10",
    "text": "Copy",
    "Groupid": "4",
    "href": "#"}] }

就是这样，我写了一段简单的javascript来遍历json对象

html: 

<ul id="mymenu">
</ul>

js: 

 var ul = document.getElementById("mymenu");
 for (var prop in myjson.data) {  
        var currentJSONObject = myjson.data[prop];
        var li = document.createElement("li");
        var anchor = document.createElement("a");
        anchor.appendChild(document.createTextNode(currentJSONObject.text));
        anchor.setAttribute("href", currentJSONObject.href);
        li.appendChild(anchor);
  ul.appendChild(li);
    }

小提琴:https://jsfiddle.net/adriel_santos/wzLrarsj/

相关文章：