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

Question

我正在尝试从 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);
          });
        }

    });

JSON:

{
    "Menu":{
        "fruit":{
            "menuTitle":["Fruits"],
            "documentTitle":["Apple, Pear"],
            "link":{
                "uk":["apple_uk.pdf", "pear_uk.pdf"],
                "europe":["apple_eu.pdf", "pear_eu.pdf"],
                "italy":["apple_it.pdf", "pear_it.pdf"],
                "germany":["apple_gr.pdf", "pear_gr.pdf"]
            }
        },
        "salad":{
            "menuTitle":["Salad"],
            "documentTitle":["Tomatoe","Paprika"],
            "link":{
                "uk":["tomatoe_uk.pdf", "paprika_uk.pdf"],
                "europe":["tomatoe_eu.pdf", "paprika_eu.pdf"],
                "italy":["tomatoe_it.pdf", "paprika_it.pdf"],
                "germany":["tomatoe_gr.pdf", "paprika_gr.pdf"]
            }
        }
    }
}

这是PLUNKR

PLUNKR 内部是代码，当由 JSON 填充时，它应该看起来像这样。我只想创建一个模板，但它对我不起作用:(

请帮助我。

提前非常感谢

Answer 1

首先将所有菜单模板字符串构建更改为:

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>';

其次，您的数据 json 文件中有错误，请更改此:

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

对此: "documentTitle":["苹果", "梨"],