Question

我正在使用此grid

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

＆＃13;

 {"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>

＆＃13;

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

ERROR：

未捕获的ReferenceError：$未在contentscript.js中定义：21

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

Answer 1

尝试这样的事情：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

您尝试使用$后可能正在加载jquery，并且在您尝试使用$时，它未定义YET
您的jquery对象可能与$的名称不同，例如jQuery，例如

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

2 个答案: