Iterating over JavaScript array in object to display in HTML

Outside of a regular for loop, you can also use Array.forEach

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

products.forEach(function(product) {
  // do something with each product...
})

There are some typos with your object.

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

Example on how to get the length of the array within the object:

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;

First, you can get this to be a little more performant by using a JS-equivalent of a StringBuilder, which is an array, like:

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

Second, rather than call $.each() where you have, you need to just call $.each on the property, which is an array, like:

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

You do not need to iterate through res object, because there is nothing to iterate and it's not iterable, instead you should iterate your res.products array

 $("#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>');

You can do something like below:

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

});

Given your starting point, I'd reduce the array into a string representation of all the elements.

I'm also using ES6 an arrow function and template syntax to make things a little more concise. Also, as others have noted, you don't need $.each to iterate an object, so I've removed that.

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>