AJAX request with FOR

Question

AJAX request with FOR

Asked 5 years, 11 months ago

Viewed 59 times

0

Good staff as I can correctly print Hello World, using AJAX request, inside a for?

My real question is: understand why the for executes your entire loop in the first ajax request, and only then run loop in the second ajax request?

Today I have that result:

HTML and JS Code

<html>
    <head>
    </head>
    <body>

    </body>
    <script src="../jquery-3.3.1.min.js"></script>
</html>
<script>
$(document).ready(function(){

});

function call(){
    for(i = 0; i <= 5; i++){
        $.ajax({
            url: 'json.json',
            type: 'get',   
            success: function(data){
            call_1(data['data'].one);
            $.ajax({
                url:'json.json',
                type: 'get',
                success: function(data){
                    call_2(data['data'].two);
                }
            });
            }
        });
    }
}

function call_1(res){
    $('body').append(res);
}

function call_2(res){
    $('body').append(res+'<hr>');
}

</script>

My json.json file:

{
    "data": {
        "one": "Hello",
        "two": " World"
    }
}

I decided to send along with the options of the ajax the:

async: false,

Thus remaining:

function call(){
    for(i = 0; i <= 5; i++){
        $.ajax({
            async: false,
            url: 'json.json',
            type: 'get',   
            success: function(data){
            call_1(data['data'].one);
            $.ajax({
                async: false,
                url:'json.json',
                type: 'get',
                success: function(data){
                    call_2(data['data'].two);
                }
            });
            }
        });
    }
}

What part of the code you can change and what part you can’t change?

– Sergio

2018/12/05 at 17:41
The part about ajax.

– Weliton Sernajotto

2018/12/05 at 17:49
Can you explain it better? I asked which can change and what nay can...

– Sergio

2018/12/05 at 17:50
So, actually I wanted to understand why for executes all your loop in the first ajax request, only then run loop in the second ajax request.

– Weliton Sernajotto

2018/12/05 at 18:00
1

Read this answer and say if it answers your question: https://answall.com/questions/1237/como-usar-o-valor-actual-de-umavari%C3%A1vel-numa-fun%C3%A7%C3%A3o-mais-interna/1238#1238

– Sergio

2018/12/05 at 18:07
Sergio, didn’t solve using Let. =(

– Weliton Sernajotto

2018/12/05 at 19:40
The problem or solution is not the let... is not yet understanding the asynchronous nature of ajax. If you read that question and my answer there you will understand that mechanism and it will help you understand the problem here. But you have to read everything, want to understand... read it and tell me how the two questions are related?

– Sergio

2018/12/06 at 16:58
I got it! I read about the asynchronous functions and adjusted the code, working correctly now. I put together with the ajax Settings the line: async: true, So he makes one request and after the other. Thank you.

– Weliton Sernajotto

2018/12/06 at 19:00

Show 3 more comments

1 answer

Browser other questions tagged javascript jquery ajax json for

You are not signed in. Login or sign up in order to post.

by Mateus Ferrando • 1 point · Answer 1 · 2018-12-05T18:32:57+00:00

You can make a recursive function instead of a for

function call(index) {
    $.ajax({
        url: 'json.json',
        type: 'get',
        success: function (data) {
            call_1(data['data'].one);
            $.ajax({
                url: 'json.json',
                type: 'get',
                success: function (data) {
                    call_2(data['data'].two);
                }
            });
        }
    });
    setTimeout(function () {
        if (index < 5) {
            index++;
            call(index);
        }
    }, 50);
}

Remembering where to call the call function start with index 0