Question

我正在尝试从3个json文件中创建一个嵌套菜单，但是在第一步我卡住了，它什么也没有返回：

var json = {};
$.getJSON("/api/category.json", function(data){
    json.category = data;
});

$.getJSON("/api/subcat.json", function(data){
    json.subcat = data;
});

$.getJSON("/api/subsubcat.json", function(data){
    json.subsubcat = data;
});

$.each(json, function(i,v) {
    console.log(json[i]); // it return nothing
});

但是当我尝试console.log(json)它返回对象时，即使我得到console.log(json.category)它也没有返回任何内容，控制台日志中没有错误。

如果我解决了这个问题，我想在循环中用这三个json文件创建一个嵌套菜单，如下所示：

＆＃13;

var obj = '';

$.each(json.category, function(i, v) {
  obj += '<li data-id="' + data[i]['id'] + '"><a href="/browse/' + currentCity + '/' + slugSearch(data[i]['name']) + '">' + data[i]['name'] + '</a><ul>';

  $.each(json.subcat, function(i, v) {
    if (json.subcat["cat_id"] == json.category["id"]) {
      obj += '<li data-id="' + data[i]['id'] + '"><a href="/browse/' + currentCity + '/' + slugSearch(data[i]['name']) + '">' + data[i]['name'] + '</a></li>';
    }
  });

  obj += '</ul>';

  // also subsub cat

  $('.simulate-cat').append($(obj));
});

＆＃13;

<ul class="simulate-cat"></ul>

＆＃13;

这样做是否适合制作嵌套菜单？

提前致谢

Answer 1

问题是您没有等待请求完成。因为json属性尚未填充

看起来应该是这样的

$.when($.getJSON("/api/category.json"), $.getJSON("/api/subcat.json") , $.getJSON("/api/subsubcat.json")).done(function( a1, a2, a3 ) {
  json.category = a1[0];
  json.subcat = a2[0];
  json.subsubcat = a3[0];
  // create menu here
});

有关如何等待多个异步回调的详细信息，请参阅$.when

通过3个json文件创建嵌套菜单

1 个答案: