Как правильно организовать вывод вложенного списка?

Question

[msdoc11]

var data = {
  "uslugi": [{
    "title": "iPhone 11 Pro Max",
      "size": [
                "68GB", "256GB", "512GB"
            ]
  }, {
    "title": "iPhone 11 Pro", 
      "size": [
                "68GB", "256GB", "512GB"
            ]
  }, {
    "title": "iPhone 11",
      "size": [
                "68GB", "256GB", "512GB"
            ]
  }, {
    "title": "iPhone XR",
      "size": [
                "68GB", "256GB", "512GB"
            ]
  }]
};

$(data.uslugi).each(function(index, item) {
  $('.products').append( 

`

<div class="item p-2">
            <img src="`+ item.img +`" alt="" class="p-2 h-64 mx-auto">
            <h2 class="text-lg text-center font-semibold p-1 pb-0">`+ item.title +`</h2>
            <div class="flex flex-wrap w-56 mx-auto py-2 pt-0 text-lg sizes">
                <div class="p-1 flex size">
                    <span class="px-2 rounded-full size active">`+ this.size[0] +`</span>
                </div>
               <div class="p-1 flex size">
                    <span class="px-2 rounded-full size active">`+ this.size[1] +`</span>
                </div>
               <div class="p-1 flex size">
                    <span class="px-2 rounded-full size active">`+ this.size[2] +`</span>
                </div>
            </div>
        </div>`
);
    });

<div class="grid max-w-screen-xl mx-auto products">
        
 
    </div>

Как сделать, чтобы в sizes выводился size вот так

<div class="flex flex-wrap w-56 mx-auto py-2 pt-0 text-lg sizes">
                <div class="p-1 flex size">
                    <span class="px-2 rounded-full size active">64GB</span>
                </div>
                <div class="p-1 flex size">
                    <span class="px-2 rounded-full size active">256GB</span>
                </div>
                <div class="p-1 flex size">
                    <span class="px-2 rounded-full size active">512GB</span>
                </div>
            </div>

без необходимости прописывать index this.size[0], this.size[1], this.size[2] и тд. Сейчас когда нет размера выводит там undefined. Чтобы при выводе он не вставлял див с пустым значением

<div class="flex flex-wrap w-56 mx-auto py-2 pt-0 text-lg sizes">
                <div class="p-1 flex size">
                    <span class="px-2 rounded-full size active">64GB</span>
                </div>
                <div class="p-1 flex size">
                    <span class="px-2 rounded-full size active">256GB</span>
                </div>
                <div class="p-1 flex size">
                    <span class="px-2 rounded-full size active">undefined</span>
                </div>
            </div>

Answer 1

[0xD34F]

$('.products').append(data.uslugi.map(item => `
  <div class="item p-2">
    <img src="${item.img}" alt="" class="p-2 h-64 mx-auto">
    <h2 class="text-lg text-center font-semibold p-1 pb-0">${item.title}</h2>
    <div class="flex flex-wrap w-56 mx-auto py-2 pt-0 text-lg sizes">
      ${item.size.map(size => `
        <div class="p-1 flex size">
          <span class="px-2 rounded-full size active">${size}</span>
        </div>
      `).join('')}
    </div>
  </div>
`).join(''))