Добавление цикла for в метод jQuery html

Question

Я пытаюсь добавить цикл for внутри цикла for с некоторым динамическим html-содержимым. но это не работает должным образом. Может кто-нибудь предложить мне, как правильно добавить динамический HTML-контент в for-loop

Я пытался удалить знак +, но он не работает

for (i = 0; i <= NOofFeature - 1; i++) {

        var amenities = results[i].amenities.map(amenity => amenitiesUiMap[amenity]);

        featureitem += '<div class="item">'+
        '<div class="imgTitle">'+
        '<a><img src="http://192.168.1.211:3000/facility' + results[i].images[0].url + '"  height="150px" alt="" /></a>'+
        '</div>'+
        '<p style="font-weight:500;font-size:16px;">' + results[i].name + '</p>'+

         for (amenityIndex in amenities) {

            featureitem += '<span style="font-size:12px;padding:5px;">' + amenities[amenityIndex].img + ' ' + amenities[amenityIndex].name + '</span>'+

        }
        '</div>';

    };

    $(".Featureprop").html(featureitem);

Получит все данные и напечатает <div class="item"> ....</div> по одному

<div class="item">
<div class="imgTitle"><a><img src="http://192.168.1.211:3000/facility/image/5d1c7ae723da621f20710c2a_441292467724100.png" height="150px" alt=""></a></div>
<p style="font-weight:500;font-size:16px;">Bhagini Suites</p>
<span style="font-size:12px;padding:5px;"><i class="fas fa-couch"></i> Air Conditioning</span>
<span style="font-size:12px;padding:5px;"><i class="fa fa-plane" aria-hidden="true"></i> Airport Transfer</span>
<span style="font-size:12px;padding:5px;"><i class="fa fa-car" aria-hidden="true"></i> Car Park</span>
<span style="font-size:12px;padding:5px;"><i class="fa fa-coffee" aria-hidden="true"></i> Coffee Maker</span>
<span style="font-size:12px;padding:5px;"><i class="fas fa-dumbbell"></i> Gym</span>
<span style="font-size:12px;padding:5px;"><i class="fas fa-swimming-pool"></i> Private Pool</span>
</div>

Answer 1

Вам нужно построить строку и соединить ее внутри внешней.

Здесь вам могут помочь несколько вещей:

• Карта может выполнять итерацию по вашему массиву в одном выражении, а не с использованием блока
• Шаблонные строки позволяют вам встроить поиск объектов, чтобы сделать ваш код более кратким

Попробуйте заменить внутреннюю часть цикла for на:

amenities.map(amenity => `<span style="font-size:12px;padding:5px;">${amenity.img} ${amenity.name}</span>`).join('')