Question

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

JSON对象数组

[  
   {  
      "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
   }
]

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。第二行和第三行显示正确的数据。我明白为什么会这样。但是，我不知道如何在向表中添加数据时排除第一个和最后一个对象的循环。我感谢任何指导我正确方向的帮助。感谢。

Answer 1

尝试在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>

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

1 个答案: