时间戳

首页 > 解决方案 > 遍历对象中的 JavaScript 数组以在 HTML 中显示

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

问题描述

我有一个这样的 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

我相信我需要遍历对象内部的数组并显示它可能包含的元素数量。这就是我卡住的地方。

标签： javascriptjqueryarraysjavascript-objects

解决方案

如果您需要获取计数，请使用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>

推荐阅读