asp.net-mvc - 使用 JSON 显示数据

Question

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

这是我的代码:

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

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

      $.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 对象在我的 View 中显示的 block ，但是当我单击菜单时，它只显示 JSON 对象最后的元素。

这是我的 JSON:

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

每个菜单是每个产品的部门。而如果我不循环菜单 block 中的产品数据，我就无法拿部门的ID来查询得到每个部门的产品。

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

Answer 1

您的代码中似乎存在复制和粘贴错误，您将依次对完全相同的网址执行 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 元素的 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>');
    });
});