使用 jQuery 从 txt 文件中获取菜单和子菜单 JSON 数据

Question

我目前正在从文本文件中获取数据并将数据打印到我的 HTML 文件中。这是我的代码：

$.get('assets/test.txt', function(data) {
var jsonData = JSON.parse(data);
    var headerText = jsonData["header"];
    var title = jsonData["title"];
    var body = jsonData["body"];
    var footer = jsonData["footer"];

    $("h1").text(headerText);
    $("h2").text(title);
    $("#main-copy").html(body);
    $("#footer-wrapper p").html(footer); 
});

但是我需要从 .txt 文件中的菜单和子菜单中获取数据并将它们包装到 <ul></ul> 中，以便最终菜单如下所示：

<ul id="menu">
        <li class="nav-item"><a class="nav-link" href="index.html">Home</li>
        <li class="nav-item"><a class="nav-link" href="page1.html">Page 1</a></li>
        <li class="nav-item">
          <a href="page1.html">Page 1</a>
          <ul class="sub-menu">
            <li class="nav-item"><a class="nav-link" href="subpage1.html">SubPage 1</a></li>
            <li class="nav-item"><a class="nav-link" href="subpage2.html">SubPage 2</a></li>
          </ul>
        </li>
        <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
      </ul>

这是来自 .txt 文件的数据：

{
    "header": "This is me doing a test",
    "menu": [{
        "title":"Home","url":"index.html"
        }, {
            "title":"Page 1",
            "url":"page2.html"
        },{
            "title":"Page 2",
            "url":"page2.html",
            "submenu": [{
                "title":"SubPage 1",
                "url":"subpage1.html"
            },{
                "title":"SubPage 2",
                "url":"subpage2.html"
            }]
        },{
            "title":"Contact",
            "url":"contact.html"
        }
    ],
    "title": "Welcome to our homepage",
    "body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pharetra sit amet ante at commodo. Sed tincidunt rhoncus fermentum. Donec fermentum volutpat est, a interdum odio scelerisque non. Nullam facilisis magna ac ipsum sollicitudin accumsan. Sed id dui adipiscing, condimentum magna non, molestie ipsum. Donec varius massa eget justo vulputate rhoncus. Integer laoreet turpis id magna rutrum sodales. Nullam eu mauris hendrerit, vulputate nisi ut, condimentum metus. Donec eros ligula, facilisis ac mi a, accumsan vestibulum tortor. Morbi tellus felis, tempor non mi ac, viverra porta lorem. Phasellus dignissim, mauris id vulputate malesuada, tortor metus placerat justo, bibendum vehicula velit magna in leo. Sed condimentum tortor ac ipsum ultricies, quis tristique massa malesuada. Vivamus vitae congue felis. Etiam dictum aliquet felis. Sed euismod in sem eu semper. Nam pulvinar nisl nisi, venenatis bibendum leo lobortis vel.<\/p><p>Nulla pharetra odio non leo sollicitudin, vel semper lorem sagittis. Pellentesque viverra pulvinar elementum. Donec pulvinar consequat augue. Aenean vitae libero sit amet quam faucibus pulvinar ac sit amet nibh. Fusce venenatis magna nulla. Curabitur dignissim justo eu purus pharetra suscipit. Donec tempus eros eget cursus vestibulum.<\/p>",
    "footer": "Copyright &copy; 2019"
}

Answer 1

两级菜单的简单实现。

//iterating menu 
jsonData['menu'].forEach((element, index) => {
  var e = '<li><a href="'+element.url+'">'+element.title+'</a>';

    //check if has own property
    if(element.hasOwnProperty('submenu')){
      e += '<ul>';
      element['submenu'].forEach((el, i)=>{
          e += '<li><a href="'+el.url+'">'+el.title+'</a></li>';
      })
      e += '</ul>';
    }
   e += '</li>';

  //append prepared data
  $('#menu').append(e);
});

Answer 2

我创建一个function 将创建一个<ul>，如果您提供menuto 功能。我使用了recursion 和forEach。我用的是纯js你可以转成jQuery

const menu = [{
        "title":"Home",
		"url":"index.html"
        }, {
            "title":"Page 1",
            "url":"page2.html"
        },{
            "title":"Page 2",
            "url":"page2.html",
            "submenu": [{
                "title":"SubPage 1",
                "url":"subpage1.html"
            },{
                "title":"SubPage 2",
                "url":"subpage2.html"
            }]
        },{
            "title":"Contact",
            "url":"contact.html"
        }
    ]

function createUl(arr,ulClass = "menu"){
	const ul = document.createElement('ul')
	ul.className = ulClass;
	arr.forEach((item) => {
		const li = document.createElement('li');
		const a = document.createElement('a');
		a.className = "nav-link";
		a.href = item.url;
		a.innerHTML = item.title;
		li.className = "nav-item";
		li.appendChild(a);
		//checks if item has submenu
		if(item.submenu){
                        //passing 'sub-menu' as 'ulClass' because this will be nested 
			li.appendChild(createUl(item.submenu,"sub-menu"));
		}
		ul.appendChild(li)
	})
	return ul;
}
document.body.appendChild(createUl(menu))