无法用数据填充智能菜单 jquery 网格答案

【问题标题】：cant fill smart menu jquery grid with data无法用数据填充智能菜单 jquery 网格
【发布时间】：2016-09-08 08:19:15
【问题描述】：

我正在使用这个grid

我想用我的数据填充它。这是我的代码：

 {"menu" :[{ 
"name": "Computers",
 "children": [{
  "name": "Notebook",
  "children": [{
   "name": "Apple"
  }, {
   "name": "Windows"
  }]
 }, {
  "name": "Tablets",
  "children": [{
   "name": "Apple"
  }, {
   "name": "Android"
  }, {
   "name": "Windows"
  }]
 }]
}, {
 "name": "Phones",
 "children": [{
  "name": "Android",
  "children": [{
   "name": "Samsung"
  }, {
   "name": "Nokia"
  }, {
   "name": "Lenovo"
  }]
 }, {
  "name": "Windows Phones",
  "children": [{
   "name": "Microsoft"
  }, {
   "name": "Nokia"
  }]
 }]
}, {
 "name": "Cameras",
 "children": [{
  "name": "Digital",
  "children": [{
   "name": "Nikon"
  }, {
   "name": "Fuji"
  }]
 }, {
  "name": "DSLR",
  "children": [{
   "name": "Canon"
  }, {
   "name": "Nikon"
  }]
 }]
}]
}




<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">
  $(function () {
    $('#main-menu').smartmenus({
    	subMenusSubOffsetX:1,
    	subMenusSubOffsetY: -8
    	
    });
  });   
</script>

 <script type = "text/javascript" language = "javascript">
 
         $(document).ready(function() {
             $.ajax({
              url: 'menuData.json',
              type: 'get',
              dataType: 'json',
              error: function(data){
               alert("error");
              },
              success: function(data){
               var obj=data;
               var json = JSON.stringify(obj);
               var s = JSON.parse(json);
               for(var i=0;i<s.menu.length;i++){
	             for(var j=0;j<s.menu[i].children.length;j++)
	             for(var n=0;n<s.menu[i].children[j].children.length;n++){
	            	
	            	
	               $("#main-menu2").append('<li><span>' + s.menu[i].name+s.menu[i].children[j].name + s.menu[i].children[j].children[n].name + '</span></li>');
	            	
               }
               }
                  }
              });

         });
      </script>
</head>
<body>

<!-- Mobile menu toggle button (hamburger/x icon) -->
<input id="main-menu-state" type="checkbox" />
<label class="main-menu-btn" for="main-menu-state">
  <span class="main-menu-btn-icon"></span> Toggle main menu visibility
</label>

<!-- Sample menu definition -->

<nav id="main-nav" role="navigation">

     <ul id="main-menu2" class="sm sm-clean"></ul>
 

</nav>
</body>
</html>

它在屏幕上打印数据而不填充菜单。

错误：

Uncaught ReferenceError: $ is not defined in contentscript.js:21

我是初学者，所以感谢您的帮助。

【问题讨论】：

你的控制台有错误吗？
是 .. 未捕获的 ReferenceError: $ is not defined in contentscript.js:21
将 jquery 添加到您的项目中

标签： javascript jquery css json

【解决方案1】：

试试这样的：

var data = {
  "menu": [{
    "name": "Computers",
    "children": [{
      "name": "Notebook",
      "children": [{
        "name": "Apple"
      }, {
        "name": "Windows"
      }]
    }, {
      "name": "Tablets",
      "children": [{
        "name": "Apple"
      }, {
        "name": "Android"
      }, {
        "name": "Windows"
      }]
    }]
  }, {
    "name": "Phones",
    "children": [{
      "name": "Android",
      "children": [{
        "name": "Samsung"
      }, {
        "name": "Nokia"
      }, {
        "name": "Lenovo"
      }]
    }, {
      "name": "Windows Phones",
      "children": [{
        "name": "Microsoft"
      }, {
        "name": "Nokia"
      }]
    }]
  }, {
    "name": "Cameras",
    "children": [{
      "name": "Digital",
      "children": [{
        "name": "Nikon"
      }, {
        "name": "Fuji"
      }]
    }, {
      "name": "DSLR",
      "children": [{
        "name": "Canon"
      }, {
        "name": "Nikon"
      }]
    }]
  }]
};


var obj = data;
var menu ='';
$.each(data.menu,function(i,v){
menu += '<li>'+v.name+'<ul>';
  $.each(v.children,function(x,t){
    menu += '<li>'+t.name+'<ul>';
    $.each(t.children,function(j,r){
     menu+='<li>'+r.name+'</li>';
    });
    menu += '</ul></li>';
  });
menu += '</ul></li>';
});
  $("#main-menu2").append(menu);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Mobile menu toggle button (hamburger/x icon) -->
<input id="main-menu-state" type="checkbox" />
<label class="main-menu-btn " for="main-menu-state">
  <span class="main-menu-btn-icon "></span> Toggle main menu visibility
</label>

<!-- Sample menu definition -->

<nav id="main-nav" role="
navigation ">

  <ul id="main-menu2" class="sm sm-clean "></ul>


</nav>

【讨论】：

【解决方案2】：

错误消息几乎说明了一切。 $ 未定义。我认为您没有将 jQuery 链接到该页面，但您提到您已经这样做了。所以，剩下两种可能性：

您可能在尝试使用 $ 之后加载 jquery，而此时您尝试使用 $ 它尚未定义
您的 jquery 对象的名称可能与 $ 不同，例如 jQuery

【讨论】：