Question

我有一个这样的JS对象：

{
   promo_name: "value",
   discount_type: "value",
   discount: "value",
   products: [
      { id: 1, name: 'name'},
      { id: 2, name: 'name'},  
   ]
}

我的目标是在视图中显示结果。我的问题是我不知道如何遍历对象内部的数组。

数据来自Ajax请求，然后解析为JS对象。

我正在使用jQuery $.each遍历res对象并显示如下属性值：

$.each(res, function (key, value) {

    $("#coupon_data").show();
    $("#coupon_details").html(
        '<div class="alert alert-success">' +
            '<h4>Promotion Details</h4>' +
            '<hr>' +
            '<p>Promotion: '     + res.promo_name    + '</p>' +
            '<p>Discount type: ' + res.discount_type + '</p>' +
            '<p>Amount: '        + res.discount      + '%</p>' +
        '</div>'
    );

});

显示三个属性（res.promo_name，res.discount_type，res.discount），但是由于数组长度不同，因此无法显示如下值：

res.products[0].name res.products[1].name

我认为我需要遍历对象内部的数组并显示其可能包含的元素数量。这就是我被困住的地方。

Answer 1

如果需要计数，请使用length中的属性Array

var count = res.products ? res.products.length : 0;

类似的东西：

var res = {
  promo_name: "value",
  discount_type: "value",
  discount: "value",
  products: [{id: 1,name: 'name'},
             {id: 2,name: 'name'}]
};

$.each(res, function(key, value) {

  $("#coupon_data").show();
  $("#coupon_details").html(
    '<div class="alert alert-success">' +
    '<h4>Promotion Details</h4>' +
    '<hr>' +
    '<p>Promotion: ' + res.promo_name + '</p>' +
    '<p>Discount type: ' + res.discount_type + '</p>' +
    '<p>Amount: ' + res.discount + '%</p>' +
    '<p>Products: ' + (res.products ? res.products.length : 0) + '</p>' +
    '</div>'
  );

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='coupon_details'></div>

如果您需要显示数量+产品详细信息：

var res = {
  promo_name: "value",
  discount_type: "value",
  discount: "value",
  products: [{id: 1,name: 'name1'},
             {id: 2,name: 'name2'}]
};

$.each(res, function(key, value) {

  $("#coupon_data").show();
   var html = '<div class="alert alert-success">' +
    '<h4>Promotion Details</h4>' +
    '<hr>' +
    '<p>Promotion: ' + res.promo_name + '</p>' +
    '<p>Discount type: ' + res.discount_type + '</p>' +
    '<p>Amount: ' + res.discount + '%</p>' +
    '<p>Products: ' + (res.products ? res.products.length : 0) + '</p><p>Details:</p>';
    
    if (res.products) {
      for (var i = 0, {length} = res.products; i < length; i++) {
        html += '<p><b>Name:</b>' + res.products[i].name + '</p>';
      }
    }
    
  $("#coupon_details").html(html);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='coupon_details'></div>

Answer 2

除了常规的for循环外，您还可以使用Array.forEach

var products = [
  { id: 123, name: 'name1',
  { id: 456, name: 'name2'
]

products.forEach(function(product) {
  // do something with each product...
})

Answer 3

您的对象有错别字。

{
   promo_name: "value",
   discount_type: "value",
   discount: "value",
   products: [
      { id: 1, name: 'name'},
      { id: 2, name: 'name'},  
   ]
}

有关如何获取对象内数组长度的示例：

var myObj = {
   promo_name: "value",
   discount_type: "value",
   discount: "value",
   products: [
      { id: 1, name: 'name'},
      { id: 2, name: 'name'},  
   ]
};

//length of products
myObj.products.length;

//one product
myObj.products[0];

//id of one product:
myObj.products[0].id;

Answer 4

首先，您可以使用StringBuilder的等效于JS的StringBuilder（例如数组）来提高性能，

var h = [
    '<div class="alert alert-success">',
    '<h4>Promotion Details</h4>',
    ...
];
$("#coupon_details").html(h.join(''));

第二个，而不是在需要的地方调用$ .each（），您只需在属性（它是一个数组）上调用$ .each即可，

$.each(res.products, function(i, product) {
    h.push('<div class=product>', product.name, '</div>');
});

Answer 5

您不需要遍历res对象，因为没有要迭代的对象并且它不是可迭代的，相反，您应该迭代res.products数组

 $("#coupon_data").show();
 $("#coupon_details").html(
   '<div class="alert alert-success">' +
   '<h4>Promotion Details</h4>' +
   '<hr>' +
   '<p>Promotion: '     + res.promo_name    + '</p>' +
   '<p>Discount type: ' + res.discount_type + '</p>' +
   '<p>Amount: '        + res.discount      + '%</p>'   
   );

 $.each(res.products, function (key, value) {
  $("#coupon_details").append('<p>Product name: '  + value.name + '</p>');
 });
 $("#coupon_details").append('</div>');

Answer 6

鉴于您的出发点，我将reduce数组变成了所有元素的字符串表示形式。

我还使用ES6的箭头功能和模板语法来使事情更加简洁。另外，正如其他人指出的那样，您不需要$.each来迭代对象，因此我已将其删除。

const res = {
   promo_name: "value",
   discount_type: "value",
   discount: "value",
   products: [
      { id: 1, name: 'name'},
      { id: 2, name: 'name'},  
   ]
}

$("#coupon_data").show();
$("#coupon_details").html(
    '<div class="alert alert-success">' +
        '<h4>Promotion Details</h4>' +
        '<hr>' +
        '<p>Promotion: '     + res.promo_name    + '</p>' +
        '<p>Discount type: ' + res.discount_type + '</p>' +
        '<p>Amount: '        + res.discount      + '%</p>' +
        '<p>Products: <ul>' +
          res.products.reduce((accum,curVal) => `${accum}<li>${curVal.id}: ${curVal.name}</li>`,'') +
        '</ul></p>' +
    '</div>'
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coupon_data">
  <div id="coupon_details">
  
  </div>
</div>

Answer 7

您可以执行以下操作：

$.each(res, function (key, value) {

     $("#coupon_data").show();

     var productElements = '' // to store product elements

     // iterate product elements, you can use for loop also   
     res.products.map((product) => {
       var {id, name} = product;
       productElements += `<p> *any thing you want to use(${id} or ${name})* </p>\n` // html element for product items as string
     })

    $("#coupon_details").html(
     '<div class="alert alert-success">' +
        '<h4>Promotion Details</h4>' +
        '<hr>' +
        '<p>Promotion: '     + res.promo_name    + '</p>' +
        '<p>Discount type: ' + res.discount_type + '</p>' +
        '<p>Amount: '        + res.discount      + '%</p>' +
        `${productElements}` //final product items
     '</div>'
   );

});

遍历对象中的JavaScript数组以HTML显示

7 个答案: