如何防止在json数据中找到的特定对象上循环

时间:2015-09-21 01:02:24

标签: jquery json ajax

我试图创建一个包含ajax响应中获得的json数据的表。我得到一个看起来像这样的对象数组:

JSON对象数组

[  
   {  
      "ItemCount":2
   },
   {  
      "ProductID":"4220068",
      "ProdMfg":"",
      "Desc":"Cambridge AR Charcoal Grey",
      "Quantity":1,
      "UnitPrice":"$1.00",
      "ExtPrice":"$1.00"
   },
   {  
      "ProductID":"4220002",
      "ProdMfg":"",
      "Desc":"Cambridge AR Dual Black",
      "Quantity":1,
      "UnitPrice":"$1.00",
      "ExtPrice":"$1.00"
   },
   {  
      "ItemTotExtPrice":2
   }
]

JQuery代码

function getPallet() {
    var minipallet = $('#mini-pallet');
    var minipalletmsgnoitems = $('#msg-noitems');
    var minipallettable = $('#mini-pallet-table');
    var minipallettablelines = $("#mini-pallet-table .mini-pallet-lines");
    var spinner = $('.loadingSpinner');
    var spinnerMed = $('.loadingSpinner-med');
    var spinnerBig = $('.loadingSpinner-big');
    $.ajax({
        type: 'Get',
        url: 'WebCatPageServer.exe?aShoppingCart',
        dataType: 'json',
        beforeSend: function () {
            minipalletmsgnoitems.add(minipallet).hide();
            spinner.show();
        },
        success: function (data) {
            spinner.hide();
            if (data[0].ItemCount === 0) {
                minipallettable.hide();
                minipalletmsgnoitems.html('<div class="col-xs-12 alert alert-danger"><img class="alert-icon" src="wp-content/themes/roofmart/assets/icons/svg/alert-placeholder-iconRed.svg" alt="No Items in Pallet Icon"/><p class="med"><b>You have no items in your pallet.</b></p></div>').show();
            } else {
                minipalletmsgnoitems.hide();
                minipallet.show();
                minipallettablelines.empty();
                $.each(data, function (i, item) {
                    var minitablelines = minipallettablelines.append("<tr><td class='text-left bold'><span class='itemNum'>" + item.ProductID + "</span></br><span class='desc'>" + item.Desc + "</span></td><td><span class='qty'>" + item.Quantity + "</span></td><td class='text-right'><span class='price'>" + item.UnitPrice + "</span></td></tr>");
                    if (i > 0) {
                        minitablelines;
                    }
                });
            }
        },
        error: function () {}
    });
}

问题 第一个和最后一个表行在每个字段中显示为undefined。第二行和第三行显示正确的数据。我明白为什么会这样。但是,我不知道如何在向表中添加数据时排除第一个和最后一个对象的循环。我感谢任何指导我正确方向的帮助。感谢。

1 个答案:

答案 0 :(得分:2)

尝试在if

中使用Object.hasOwnProperty()条件$.each()
if (item.hasOwnProperty("ProductID" || "Desc" || "Quanity" || "UnitPrice")) {
  minipallettablelines
  .append("<tr><td class='text-left bold'><span class='itemNum'>" 
    + item.ProductID + "</span></br><span class='desc'>" 
    + item.Desc + "</span></td><td><span class='qty'>" 
    + item.Quantity + "</span></td><td class='text-right'><span class='price'>" 
    + item.UnitPrice + "</span></td></tr>");
}

var data = [  
   {  
      "ItemCount":2
   },
   {  
      "ProductID":"4220068",
      "ProdMfg":"",
      "Desc":"Cambridge&#32;AR&#32;Charcoal&#32;Grey",
      "Quantity":1,
      "UnitPrice":"$1.00",
      "ExtPrice":"$1.00"
   },
   {  
      "ProductID":"4220002",
      "ProdMfg":"",
      "Desc":"Cambridge&#32;AR&#32;Dual&#32;Black",
      "Quantity":1,
      "UnitPrice":"$1.00",
      "ExtPrice":"$1.00"
   },
   {  
      "ItemTotExtPrice":2
   }
];

$.each(data, function(i, item) {
  if (item.hasOwnProperty("ProductID" || "Desc" || "Quanity" || "UnitPrice")) {
  console.log(item.ProductID  
    , item.Desc 
    , item.Quantity
    , item.UnitPrice);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>