JQuery Invalid or unexpected token and wait for loop to finish first

Question

Code:

for (var i = 0; i < 24; i++) {
   var block;
   if(i < 16) block = `<div class="wrapper"><div class="gap" id="imem_ingess${i}"></div><div class="container"><div class='title'>IMEM ingress ${i} Graph</div><div class="description">hey1</div></div><div class="pt-2 pb-2"></div><div class="chart-container" id="imem_ingess${i}_chart_container" style="position: relative; height:200rem; width:95vw; display: block;"><canvas id="imem_ingess${i}_chart" style="height: 30%; width: 30%;  display: block;"></canvas></div><div class="pt-4 pb-5"></div><div class="chart-container" id="imem_ingess${i}_chart_container2" style="position: relative; height:80rem; width:95vw; display: block;"><canvas id="imem_ingess${i}_chart2" style="height: 30%; width: 30%;  display: block;"></canvas></div></div>`;
   else block = `<div class="wrapper"><div class="gap" id="imem_egess${i-16}"></div><div class="container"><div class='title'>IMEM egress ${i-16} Graph</div><div class="description">hey2</div></div><div class="pt-2 pb-2"></div><div class="chart-container" id="imem_egess${i-16}_chart_container" style="position: relative; height:200rem; width:95vw; display: block;"><canvas id="imem_egess${i-16}_chart" style="height: 30%; width: 30%;  display: block;"></canvas></div><div class="pt-4 pb-5"></div><div class="chart-container" id="imem_egess${i-16}_chart_container2" style="position: relative; height:80rem; width:95vw; display: block;"><canvas id="imem_egess${i-16}_chart2" style="height: 30%; width: 30%;  display: block;"></canvas></div></div>`;

   $('#imem_statistics_page').append(block);​
}

---

Issues:

1) This code doesn't compile and it's throwing a syntax error.
2) I want to wait for the loop to finish before executing the remaining code.

Thanks in advance!

Answer 1

Since your first question is solved, here is second answer for waiting for loop.

<script>

    const forLoop = async _ => {
        console.log('Start')
        //...

        for (var i = 0; i < 24; i++) {
            var block;
            if (i < 16) block = `<div class="wrapper"><div class="gap" id="imem_ingess${i}"></div><div class="container"><div class='title'>IMEM ingress ${i} Graph</div><div class="description">hey1</div></div><div class="pt-2 pb-2"></div><div class="chart-container" id="imem_ingess${i}_chart_container" style="position: relative; height:200rem; width:95vw; display: block;"><canvas id="imem_ingess${i}_chart" style="height: 30%; width: 30%;  display: block;"></canvas></div><div class="pt-4 pb-5"></div><div class="chart-container" id="imem_ingess${i}_chart_container2" style="position: relative; height:80rem; width:95vw; display: block;"><canvas id="imem_ingess${i}_chart2" style="height: 30%; width: 30%;  display: block;"></canvas></div></div>`;
            else block = `<div class="wrapper"><div class="gap" id="imem_egess${i - 16}"></div><div class="container"><div class='title'>IMEM egress ${i - 16} Graph</div><div class="description">hey2</div></div><div class="pt-2 pb-2"></div><div class="chart-container" id="imem_egess${i - 16}_chart_container" style="position: relative; height:200rem; width:95vw; display: block;"><canvas id="imem_egess${i - 16}_chart" style="height: 30%; width: 30%;  display: block;"></canvas></div><div class="pt-4 pb-5"></div><div class="chart-container" id="imem_egess${i - 16}_chart_container2" style="position: relative; height:80rem; width:95vw; display: block;"><canvas id="imem_egess${i - 16}_chart2" style="height: 30%; width: 30%;  display: block;"></canvas></div></div>`;

            await $('#imem_statistics_page').append(block);// will wait
        }

        //...
        console.log('End')
    }

    forLoop()

</script>

Screenshot of test

Related Link

JavaScript async and await

Await in a for loop