Multiple getJSON requests inside array
<p>I have the following JQuery:</p>

<pre><code>$(document).ready(function() {
    var names = ['item1', 'item2'];
    var series1 = [{ name: '', data: []}];
    var series2 = [{ name: '', data: []}];
    var seriesCounter = 0;
    ....
    renderCharts(url, otherUrl);

    function renderCharts(url, otherUrl) {
        if (otherUrl != '') {
            $.each(names, function (i, name) {

                $.getJSON('somurl', function (items) {
                    series1[i].name = name;

                    $.each(items.somedata, function (j, item) {
                        series1[i].data.push({
                            x: Date.parse(item.key),
                            y: item.value
                        })
                    });

                    seriesCounter++;

                    if (seriesCounter == names.length) {
                        ... render chart once all data has been downloaded
                    }
                });
            });
        }

        $.getJSON(url, function (items) {
            $.each(items.otherData, function (i, item) {
                series2[0].data.push({
                    x: Date.parse(item.Key),
                    y: item.Value
                })
            });

            // render other chart
        });
    }
}
</code></pre>

<p>I can't get this to work. Every time I run this I never enter the following condition:</p>

<pre><code>if (seriesCounter == names.length) {
    ... render chart once all data has been downloaded
}
</code></pre>

<p>If I only have one item in the names array, it works just fine. The moment I add two, the condition never becomes true and therefore my charts never renders.</p>

<p>What am I missing?</p>
