Javascript for loop increment not subtracting

Question

0.00/5 (No votes)

See more:

Hello

I was hoping someone could help me as I have been stuck on this issue for a while. I have tried various ways of adding promises and waits but Im not having much luck.

Im trying to make a dynamic gird. If 5 elements passed to the view it would build one panel with 3 buttons and one panel with 2 buttons. If it was 2 elements passed it would be one panel with 2 buttons.

The javascript will split the list passed up into the appropriate sections and then pass this back to the controller to update a partial view.

It seems to be almost working apart from one issue. I was hoping that by comparing the number of reports to the processed reports it would be able to identify that all 3 (in the example) have been displayed and stop the foreach loop however the loop is continuing and repeating the loop 3 times. I believe this is where the promise and async would come into the solution.

The code below has started to get messy as I have tried every example I could find but I'm still having no luck.

What I have tried:

$(document).ready(function () {

       var numberOfReports = @Model.Select(x => x.ReportName).Count();
       var reports = JSON.parse('@Html.Raw(Json.Encode(Model.Select(x => x.ReportName)))');

       var divId = 1;
       var arrayId = 0;

       processedReports = 0;

       for (let i = 0; i < numberOfReports; i++) {


           if (numberOfReports === processedReports) return;

                  setTimeout(function () {

                      if (numberOfReports >= 3) {

                          const reportLinks = [reports[arrayId], reports[arrayId + 1], reports[arrayId + 2]]

                          var postData = { threeCells: reportLinks };

                          $.ajax({
                              type: "POST",
                              url: '@Url.Action("ThreeCells", "Home")',
                              data: postData,
                              dataType: "html",
                              success: function (result) {

                                  let threeDiv = document.createElement('div');

                                  threeDiv.setAttribute('id', divId);
                                  document.querySelector('#inner').appendChild(threeDiv);

                                  $('#' + divId).html(result);

                                  divId++;

                                  arrayId = arrayId + 3;
                                  processedReports = processedReports + 3;


                              }
                          })


                      }
                      else if (numberOfReports = 2) {

                          const reportLinks = [reports[arrayId], reports[arrayId + 1]]

                          var postData = { twoCells: reportLinks };

                          $.ajax({
                              type: "POST",
                              url: '@Url.Action("TwoCells", "Home")',
                              data: postData,
                              dataType: "html",
                              success: function (result) {

                                  let twoDiv = document.createElement('div');

                                  twoDiv.setAttribute('id', divId);
                                  document.querySelector('#inner').appendChild(twoDiv);

                                  $('#' + divId).html(result);

                                  divId++;
                                  arrayId = arrayId + 2;
                                  processedReports = processedReports + 2
                              }
                          })


                      }
                      else if (numberOfReports = 0) {
                          return;
                      }


                   }, 1000 * i);

               }




   })

ImageUpload.io — image — image.png[^]

Posted 10-Oct-23 6:12am

Member 14125980

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Mike Hankey · Answer 1 · 2023-10-10T06:33:00

Solution 1

In your

JavaScript

else if (numberOfReports = 0) {

should be

else if (numberOfReports == 0) {

in both of them

Posted 10-Oct-23 6:33am

Mike Hankey

Updated 10-Oct-23 7:02am

v2

Richard Deeming · Answer 2 · 2023-10-10T23:24:00

I'm not entirely sure what you're doing, but rewriting this to an async function is fairly simple:

JavaScript

$(async function() {
    const numberOfReports = @Model.Count();
    const reports = @Html.Raw(Json.Encode(Model.Select(x => x.ReportName)));
    
    // See https://stackoverflow.com/a/39538518/124386
    const delay = (time, value) => new Promise(resolve => setTimeout(resolve, time, value));
    
    let divId = 1;
    let arrayId = 0;
    let processedReports = 0;
    
    for (let i = 0; i < numberOfReports; i++) {
        if (numberOfReports === processedReports) { break; }
        
        if (numberOfReports >= 3) {
            const reportLinks = reports.slice(arrayId, arrayId + 3);
            const postData = { threeCells: reportLinks };
            
            const result = await $.ajax({
                type: "POST",
                url: '@Url.Action("ThreeCells", "Home")',
                data: postData,
                dataType: "html"
            });
            
            const threeDiv = document.createElement('div');
            threeDiv.setAttribute('id', divId);
            document.querySelector('#inner').appendChild(threeDiv);
            $('#' + divId).html(result);
            divId++;
            
            arrayId = arrayId + 3;
            processedReports = processedReports + 3;
        }
        else if (numberOfReports === 2) {
            const reportLinks = reports.slice(arrayId, arrayId + 2;
            const postData = { twoCells: reportLinks };
            
            const result = await $.ajax({
                type: "POST",
                url: '@Url.Action("TwoCells", "Home")',
                data: postData,
                dataType: "html"
            });
            
            const twoDiv = document.createElement('div');
            twoDiv.setAttribute('id', divId);
            document.querySelector('#inner').appendChild(twoDiv);
            $('#' + divId).html(result);
            divId++;
            
            arrayId = arrayId + 2;
            processedReports = processedReports + 2;
        }
        else {
            break;
        }
        
        await delay(1000);
    }
});