Javascript 在jQuery中从JSON填充HTML不起作用

我试图从JSON文件构建一个简单的菜单

几天来我一直在努力找出正确的逻辑，现在我迷路了：

逻辑是这样的：

$.ajax({
        url: 'data.json',
        cache: false,
        data: "",
        dataType: 'json',
        success: function (results) {
          return $.map(results.Menu, function(obj, i) {
            var menuTemplate = '';
            $.each(obj.menuTitle,function(k,l){
              console.log(obj.link);
                    menuTemplate += '<ul>';
                    menuTemplate += '<li>'+obj.menuTitle;
                     menuTemplate += '<div class="menuList">';
                     menuTemplate += '<div class="left">';
                     menuTemplate += '<ul>';
                     menuTemplate += '<li>'+obj.documentTitle[k]+'</li>';
                     menuTemplate += '</ul>';
                     menuTemplate += '</div>';
                     menuTemplate += '<div class="right">';
                     menuTemplate += '<ul class="region">';
                     menuTemplate += '<li><a href="'+obj.link+'">'+obj.link+'</a></li>'
                     menuTemplate += '</ul>';
                     menuTemplate += '</div>';
                     menuTemplate += '</div>';
                    menuTemplate += '</li>';
                    menuTemplate += '</ul>';
            });
            menuTemplate += "";
            return $('#menu2').append(menuTemplate);
          });
        }

    });

这是我的建议

在PLUNKR内部是代码，当它被JSON填充时应该是这样的。我只想创建一个模板，但它对我不起作用：(

请帮帮我

---

非常感谢您首先将所有菜单模板字符串生成更改为：

menuTemplate += '<ul>';
menuTemplate += '<li>'+obj.menuTitle;
menuTemplate += '<div class="menuList">';
menuTemplate += '<div class="left">';
menuTemplate += '<ul>';
$.each(obj.documentTitle, function(mainkey, title) {
  menuTemplate += '<li>'+title+'</li>';
});
menuTemplate += '</div>';
menuTemplate += '<div class="left">';
$.each(obj.link, function(region, files) {
  menuTemplate += '<ul class="region">';
    $.each(files, function(key, file) {
      menuTemplate += '<li>'+file+'</li>';
    });
  menuTemplate += '</ul>';
});
menuTemplate += '</div>';
menuTemplate += '</li>';
menuTemplate += '</ul>';

为此：

---

“文档标题”：[“苹果”、“梨”]，

我有点困惑你为什么要做

$。每个
都在
obj.menuTitle
上，因为那不是一个集合？？？对不起，请注意你看到的任何错误，因为我自己有点困惑，代码有什么问题。我如何才能让它工作？这样我就可以从JSON文件创建菜单？许多人都感谢使用p是强制性的LUNKR？在我看来，为了从JSON生成HTML，有更好的Knockout.js套件。在你的链接上也做了一个分叉
menuTemplate += '<ul>';
menuTemplate += '<li>'+obj.menuTitle;
menuTemplate += '<div class="menuList">';
menuTemplate += '<div class="left">';
menuTemplate += '<ul>';
$.each(obj.documentTitle, function(mainkey, title) {
  menuTemplate += '<li>'+title+'</li>';
});
menuTemplate += '</div>';
menuTemplate += '<div class="left">';
$.each(obj.link, function(region, files) {
  menuTemplate += '<ul class="region">';
    $.each(files, function(key, file) {
      menuTemplate += '<li>'+file+'</li>';
    });
  menuTemplate += '</ul>';
});
menuTemplate += '</div>';
menuTemplate += '</li>';
menuTemplate += '</ul>';

"documentTitle":["Apple, Pear"],