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

Populating HTML from JSON in jQuery not working

本文关键字：HTML 不起作用 填充 JSON jQuery 中从      更新时间：2023-09-26

我正试图从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填充时的样子。我只想创建一个模板，但它对我不起作用吗：（

请帮帮我。

提前感谢

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

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"：["Apple"，"Pear"]，

相关文章：