jQuery promise with deconstructed arrays

index.html

<!-- The div we'll write stuff in -->
<div id="final">
</div>

<div class="event-wrap">
	<span data-title="test-1">words</span>
</div>

<div class="event-wrap">
	<span data-title="test-2">words</span>
</div>

<div class="event-wrap">
	<span data-title="test-3">words</span>
</div>

<div class="event-wrap">
	<span data-title="test-4">words</span>
</div>

<div class="event-wrap">
	<span data-title="test-5">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-1">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-2">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-3">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-4">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-5">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-gerbil-1">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-gerbil-2">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-gerbil-3">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-gerbil-4">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-gerbil-5">words</span>
</div>
<div class="event-wrap">
	<span data-title="bert-test-tartoon-1">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-tartoon-2">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-tartoon-3">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-tartoon-4">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-tartoon-5">words</span>
</div>
<div class="event-wrap">
	<span data-title="bert-test-darrel-1">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-darrel-2">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-darrel-3">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-darrel-4">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-darrel-5">words</span>
</div>
<div class="event-wrap">
	<span data-title="bert-test-starbucks-1">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-starbucks-2">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-starbucks-3">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-starbucks-4">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-starbucks-5">words</span>
</div>
<div class="event-wrap">
	<span data-title="bert-test-deliver-1">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-deliver-2">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-deliver-3">words</span>
</div>

<div class="event-wrap">
	<span data-title="bert-test-deliver-4">words</span> 
</div>

<div class="event-wrap">
	<span data-title="bert-test-deliver-5">words</span>
</div>

jquery-promise-with-deconstructed-arrays.markdown

jQuery promise with deconstructed arrays

A Pen by Douglas Black on CodePen.

License.

script.js

const otherEvents = []

const birthday = [1,2,3],
		fart = [4,5,6],
		lobby = [7,8,9],
		theImportantOne = []
var finalOutput = [] 
console.log('starting')

$(document).ready(function() {

	$('.event-wrap').each(function(){

		let s = $(this).find('span').data('title')
		console.log('s', s)
		theImportantOne.push(s) 

    })
    .promise()
    .done(function() {

    	finalOutput = [...birthday, ...fart, ...lobby, ...theImportantOne]
      
      	console.log('theImportantOne', theImportantOne)
    	console.log('finalOutput', finalOutput)

    	// Boring stuff to output it
    	let output = ''

    	finalOutput.forEach(function(a) {
    		output += `<p>${a}</p>`
    	})

        console.log('output', output)
    	$('#final').html(output)

    })

})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

.event-wrap {
  display:none;
}