How to Initiate $.getJSON multiple times using For Loop

Question

I am creating a widget that pulls HTML content from a URL Path with specified parameters.

The widget needs to be allowed to appear on multiple areas of the website owner.

Here is the front-end javascript

<script src="http://www.thecashwidget.com/widget/scripts.js"></script>
        <script>
        aditize.init(["021232f297","4","1","myDiv,myDiv2"]);
        </script>

here is the content of scripts.js

var aditize = aditize || (function() {
var _args = {}; // private
// Localize jQuery variable
var jQuery;
jQuery = window.jQuery;

function scriptLoadHandler() {
    jQuery = window.jQuery.noConflict(true);
     
}

return {
        init : function(Args) {
            _args = Args;
            var container = _args[3].split(',');
            jQuery(document).ready(function($) {
            for (i = 0; i < container.length; i++) {
                var getJSONURL = 'http://www.thecashwidget.com/widget/frame.php?callback=?&c='+ _args[1] + '&r=' + _args[2];
                $.getJSON(getJSONURL,'id=' + _args[0], function(res){
                    $("#" + container[i]).html(res.data);
             });
       }
    });
    
        }
    };

})();

This line in particular stops the code from working

$("#" + container[i]).html(res.data);

when I hardcode the value "i", it works

$("#" + container[0]).html(res.data); // this works

This line is important because it reads the 4th parameter of the Init sequence. The 4th parameter includes an array of containers where the widget should be placed. In our example, we have myDiv and myDiv2. With everything running smoothly, we should have a 4 by 1 widget in container with id="myDiv" and another 4 by 1 widget in a container with id="myDiv2".

I have tried this

<script src="http://www.thecashwidget.com/widget/scripts.js"></script>
        <script>
        aditize.init(["021232f297","4","1","myDiv"]);
        aditize.init(["021232f297","1","4","myDiv2"]);
        </script>

And that does not work either. Can anyone point out why the code is not allowing me to getJSON multiple times?

I'm at work and can't run your code, but what is the value of i returned, in the failed example? I suspect it's not what you think it is... put some tests in your callback, find out what's really going on. — wwwmarty, Jul 21 '15 at 15:53
Based on console.log(res.data). I am getting the correct number of responses from the URL path. It's just not rendering at all on the front-end with .html(res.data). I added console log and it seems that i is stuck on iterating at 2. Do you have
on your html page? I am going to start a jsBin — Markus Proctor, Jul 21 '15 at 16:09
Reverted self-vandalism. There's nothing wrong with having a duplicate question as they point to other useful questions. — General Grievance, May 31 '22 at 15:45

score 1 · Answer 1 · answered Jul 21 '15 at 16:52

The problem is it executes all the GETs simultaneously yet because of ASYNC it is still waiting on the response. Once the response comes back, it is using the set value of I which is probably whatever I ends up as when the loop terminates. You should make this a recursive function like so:

    return {
    init: function(Args) {
        _args = Args;
        var container = _args[3].split(',');
        jQuery(document).ready(function($) {
            function makeCall(URL, counter) {
                $.getJSON(getJSONURL, 'id=' + _args[0], function(res) {
                    $("#" + container[counter]).html(res.data);
                });
            }

            for (i = 0; i < container.length; i++) {
                var getJSONURL = 'http://www.thecashwidget.com/widget/frame.php?callback=?&c=' + _args[1] + '&r=' + _args[2];
                makeCall(getJSONURL, i)
            }
        });
    }
};
})();

How to Initiate $.getJSON multiple times using For Loop

1 Answers1