JSFiddle - React, Tailwind, and code Playground

by ofirattia

HTML

<div class="person">
</div>
<div class="person">
 <div class="detail" data-field="age">34</div>
    <div class="detail" data-field="name">red</div>
</div>
<div class="person">
    <div class="detail" data-field="name">David</div>
    <div class="detail" data-field="age">56</div>
    <div class="detail" data-field="name">brown</div>
</div>

JavaScript

let getBanners1 = () => {
        return new Promise((resolve, reject) => {
            let itemsProcessed = 0;
            const dynamicMessagesArr = [];
            document.querySelectorAll('div').forEach((div, index, array)  => {
            		itemsProcessed = itemsProcessed + 1;
                if (div.getAttribute('banner-id')) {
                    
                    const bannerID = div.getAttribute('banner-id');
                    const bannerContent = div.innerHTML;
                    const dynamicMessagesItem = {
                        messageID: bannerID,
                        messageContent: bannerContent};
                    dynamicMessagesArr.push(dynamicMessagesItem);
                }
                console.log(itemsProcessed)
                console.log(array.length);
                if (itemsProcessed === array.length) {
                		
                    resolve(dynamicMessagesArr);
                   
                }
            });
        });
    }
// every element with a data-field attribute

getBanners1().then((data) => {
	 console.log(data);
})