How to use AJAX inside for loop

Question

I want to call another AJAX function with the new URL I got from my first AJAX call. But if I try for loop like this, it fails. I think the for loop does not wait until AJAX does its job, but I don't know how to fight it. Any suggestions?

    <!DOCTYPE html>
            <html>
        <head>
            <title>Example</title>
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
            <link rel="stylesheet" href="bootstrap.min.css">
            <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
            <style>
        body{
            background-color: #D4DAD8;

        }
        #content {
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        }
        #kastid{
        background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #EDEDED 100%);
        background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #EDEDED 100%);
        background-image: -o-linear-gradient(top left, #FFFFFF 0%, #EDEDED 100%);
        background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #EDEDED));
        background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #EDEDED 100%);
        background-image: linear-gradient(to bottom right, #FFFFFF 0%, #EDEDED 100%);
        padding: 3px 3px;
        height: 400px;
        }
            </style>
        </head>
        <body>

           <div id="content"></div>

        <script type="text/javascript">
        var url1 = "https://www.readability.com/api/content/v1/parser?url=";
        var urltoken = "&token=18ba7d424a0d65facdaea8defa356bc3e430f8ce";
        var i = 0;
        var link = [];
        var finalurl = [];
        var pubDate = [];
        $.ajax({
            url:'https://www.readability.com/rseero/latest/feed',
            dataType:'xml',
            type:'GET',
            success:function(xml) {
                 $(xml).find('item').each(function() {
                    pubDate[i] = $(this).find("pubDate").text();                
                    link[i] = $(this).find("link").text();           
                    finalurl[i] = url1 + link[i] + urltoken; 
                    console.log(i);
                    console.log(finalurl[i]);
                    console.log(link[i]);
                    i++;
                 });
            },
            error:function() {
                alert("Feed error.1.!");
            }
        }).done(function () {
            for(i = 0; i < finalurl.length; i++) {
            getInfo(i);
        }
        });
        function getInfo(i) {
        $.ajax({
            url:finalurl[i],
            dataType:'xml',
            type:'GET',
            success:function(xml) {
                console.log(finalurl[i]);
                var title = $(this).find("title").text();
                var content = $(this).find("content").text();
                $("#content").append('<div class="col-md-4 col-xs-12" id="kastid"><a href="'+link[i]+'">'+title+'</a><p><p>'+pubDate[i]+'<p><p>'+description);
            },
            error:function() {
                console.log(finalurl[i]);
                alert("Feed error..!");
            }
        });
        }
        </script>
        </body>
        </html>

http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — epascarello, Nov 03 '14 at 18:10

score 2 · Answer 1 · answered Nov 03 '14 at 18:10

2

Use the Promise feature. This allows you to run a piece of code after an async code has completed running. This means that using promises, after the 1st ajax is finished the 2nd one can be executed and have access to data from 1st ajax.

See http://api.jquery.com/promise/

As a note, the return object from $.ajax() implements the Promise interface and can be used directly as a promise.

answered Nov 03 '14 at 18:10

AlexL

1,699
12
20

I don't understand this that much. Can you show me how do I implement this Promise into my code. I got it working with this async: false thing. – mrtn Nov 03 '14 at 18:28
Async: false will stop every javascript code execution until your ajax responds. This will crash everything. haha – Elias Soares Nov 03 '14 at 18:33
3

@Larry `asyc: false` will block the thread and each iteration will have to wait for the last call to finish. – Dennis Martinez Nov 03 '14 at 18:34

How to use AJAX inside for loop

1 Answers1