2

我是 JSON 的新手，我正在尝试制作可以单击并显示数据的菜单。所有对象都是从我的 asp.net mvc 项目的控制器返回的。

这是我的代码：

<script language="javascript" type="text/javascript">
  function ViewProduct() {
    var searchVal = $("#txtsearch").val();
    $.getJSON(url, function (data) {
      var mainMenu = $("#content ul#navmenu-v");
      $.each(data, function (index, dataOption) {
        var new_li = $("<li class='level1' id='select_list'><a href='javascript:void(0);' id='" + dataOption.ID + "' class ='selectedcategory'>" + dataOption.Name + "</a>");
        mainMenu.append(new_li);
        $('a#' + dataOption.ID).click(function () {
        var urlGetProByDep = '<%: Url.Content("~/") %>' + "Products/GetProductsByDepList";
        t = dataOption.ID;
        var data = {};
        if (searchVal != "") {
          data.depID = t;
          data.Q = searchVal;
        } else {
          data.depID = t;
        }
      $(".brand_id").empty();
      $.getJSON("ProductListing/Index", data, function (product) {
         $(".brand_id").empty();
         $.getJSON("ProductListing/Index", data, function (product) {
            $.each(product.ja, function (index, value) {
               $(".brand_id").html( value.Name + "</br>" + value.PictureName + "</br>" + value.ID);
            });
         });
      });
   });
}

$(document).ready(function () {
   ViewProduct(); 
});

另一个菜单代码块工作得很好，只是我上面的代码块有问题：

      $.getJSON("ProductListing/Index", data, function (product) {
         $(".brand_id").empty();
         $.getJSON("ProductListing/Index", data, function (product) {
            $.each(product.ja, function (index, value) {
               $(".brand_id").html( value.Name + "</br>" + value.PictureName + "</br>" + value.ID);
            });
         });
      });

这是我将JSON对象显示在我的视图中的块，但是当我单击菜单时，它只显示JSON对象最后的元素。

这是我的 JSON：

{"ja":
   [
       {"Name":"ABC1","PictureName1":"my image name1","ID":1},   
       {"Name":"ABC2","PictureName2":"my image name2","ID":2}
]}

每个菜单都是每个产品的部门。并且如果我不循环菜单块中的产品数据，我就无法通过部门的ID来查询获取每个部门的产品。

欢迎任何想法或问题，感谢您抽出宝贵的时间。

4

2 回答 2

1

您正在订阅呼叫.click中的锚点事件。$.each但是由于您已经捕获了dataOption用于在闭包中准备 AJAX 请求的变量，很明显，当您单击链接时，该dataOption变量已经指向您正在循环的数组的最后一个元素。所以你可以像这样将参数传递给点击回调：

<script type="text/javascript">
    function ViewProduct() {
        // TODO: There's some url variable used here which is nowhere defined => define it
        $.getJSON(url, function (data) {
            var mainMenu = $("#content ul#navmenu-v");
            $.each(data, function (index, dataOption) {
                $(mainMenu)​.append(
                    $('<li/>', {
                        'class': 'level1',
                        // TODO: find an unique id or you get broken HTML
                        'id': 'select_list',
                        'html': $('<a/>', {
                            'href': '#',
                            'id': dataOption.ID,
                            'class': 'selectedcategory',
                            'text': dataOption.Name,
                            'click': function(arg) {
                                return menuClick(arg);
                            }({ dataOption: dataOption })
                        })
                    })
                );​
            });
        });
    }

    function menuClick(arg) {
        var urlGetProByDep = '<%= Url.Action("GetProductsByDepList", "Products") %>';
        var t = arg.dataOption.ID;
        var data = { };
        var searchVal = $('#txtsearch').val();
        if (searchVal != '') {
            data.depID = t;
            data.Q = searchVal;
        } else {
            data.depID = t;
        }

        $('.brand_id').empty();

        var url = '<%= Url.Action("Index", "ProductListing") %>';

        // TODO: Are those 2 nested AJAX calls really necessary here?
        $.getJSON(url, data, function (product) {
            $('.brand_id').empty();
            $.getJSON(url, data, function (product) {
                $.each(product.ja, function (index, value) {
                    $('.brand_id').html( value.Name + "</br>" + value.PictureName + "</br>" + value.ID);
                });
            });
        });
    }

    $(document).ready(ViewProduct);
</script>

另请注意，我已将searchVal声明移动到 click 回调中，以说明在页面加载和用户实际单击链接之间其值的变化。

于 2012-05-03T06:18:58.783 回答
1

您的代码中似乎有一个复制和粘贴错误，您将对完全相同的 url 执行 2 个请求，甚至不使用第一个请求的结果。我猜你只想要类似的东西

$(".brand_id").empty();
$.getJSON("ProductListing/Index", data, function (product) {
    $.each(product.ja, function (index, value) {
         $(".brand_id").html( value.Name + "</br>" + value.PictureName + "</br>" + value.ID);
    });
});

但是你的问题是.html()方法。您正在循环您的产品，并且在每一轮中，您都将每个 .brand_id-element 的 html 设置为一个新值。因此，您看到的结果就是您在上一次迭代中为所有元素设置的结果。您需要做的是单独设置每个元素的 HTML，每个元素都有不同的内容。

然而，与其清空列表项并向它们读取新内容（也许您的产品数量会更改每个查询请求），我宁愿删除所有项并附加新项：

$(".brand_id").remove();
$.getJSON("ProductListing/Index", data, function (product) {
    var $parent = $("#parent"); // the parent node of the product list
    $.each(product.ja, function (index, value) {
         $parent.append('<li class="brand_id">' + value.Name + '<br />' + value.PictureName + '<br />' + value.ID + '</li>');
    });
});

（编辑）......或者，如果brand_id真的是一个ID：

var $parent = $("#brand_id").empty();
$.getJSON("ProductListing/Index", data, function (product) {
    $.each(product.ja, function (index, value) {
         $parent.append('<div>' + value.Name + '<br />' + value.PictureName + '<br />' + value.ID + '</div>');
    });
});
于 2012-05-03T08:27:39.110 回答