CODEWITHSUNDEEP
javascriptjqueryajax
mrtn
mrtn

Reputation: 35

How to use AJAX inside for loop

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>

Upvotes: 0

Views: 217

Answers (1)

AlexL
AlexL

Reputation: 1707

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.

Upvotes: 2

Related Questions