迭代对象中的 JavaScript 数组以显示在 HTML 中

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

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

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数组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>'
   );

});