Перебор массива JavaScript в объекте для отображения в HTML - PullRequest
Новая
       43

Перебор массива JavaScript в объекте для отображения в HTML

0 голосов
/ 24 октября 2018

У меня есть такой объект 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].nameres.products[1].name

Я считаю, что мне нужно перебрать массив, который находится внутри объекта, и отобразить количество элементов, которые он может содержать.Вот где я застрял.

Ответы [ 7 ]

0 голосов
/ 24 октября 2018

Учитывая вашу начальную точку, я бы 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>
0 голосов
/ 24 октября 2018

Вы можете сделать что-то вроде ниже: 

$.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>'
   );

});
0 голосов
/ 24 октября 2018

Вам не нужно перебирать объект 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>');
0 голосов
/ 24 октября 2018

Во-первых, вы можете сделать это немного более производительным, используя 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>');
});
0 голосов
/ 24 октября 2018

Есть некоторые опечатки с вашим объектом. 

{
   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;
0 голосов
/ 24 октября 2018

Вне обычного цикла for вы также можете использовать Array.forEach 

var products = [
  { id: 123, name: 'name1',
  { id: 456, name: 'name2'
]

products.forEach(function(product) {
  // do something with each product...
})
0 голосов
/ 24 октября 2018

Если вам нужно получить счет, используйте атрибут 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>
...