JQuery + Ajax: JavaScript runtime error: Function expected

Question

I'm new to this and did not find an answer for my problem on the internet.

I have the following script in my asp.net webpage. It gives me the error that a function is expected.

When I use a hard coded city name and a hard coded div id, it works just fine, But from the moment I start to use a loop to change dynamically 1) the url to be used, 2) the city name and 3) div id, I receive the error. Any solutions? Thanks in advance!

    jQuery(document).ready(function ($) {

        var strurl;
        var encodedUrl;
        var city;
        var cities = ["firenze", "rome", "milan", "venice", "perugia", "urbino"];
        for (var i = 1; i < 7; ++i) {
            city = cities(i - 1);
            strurl.toString = "http://api.aerisapi.com/observations/" + city + ",it?client_id=ZPYsvZLE4U9tkifhy3XMc&client_secret=IwQPYv7GA9XYR0bc9ziJ03ug5H2Tmh1gmxmAybEd";
            $.ajax({
                url: strurl,
                dataType: "jsonp",
                success: function (json) {
                    if (json.success == true) {
                        var ob = json.response.ob;
                        var weather = ob.weather.toLowerCase();
                        $('#js' + i + '1').html(city + ': ');
                        $('#js' + i + '2').html(weather);
                        $('#js' + i + '3').html(ob.tempC + '°');
                    }
                    else {
                        alert('An error occurred: ' + json.error.description);
                    }
                }
            });
        };            
    });

Answer 1

The problem is here:

city = cities(i - 1)

It should be:

city = cities[i - 1]

The cities variable is an array, so you access its elements with [] notation - your code used parentheses which means JS tries to treat it as a function call.

In my opinion it would be tidier to not hardcode the length of the array in your for condition, but use its .length property instead:

for (var i = 1; i <= cities.length; ++i) {
        city = cities[i-1];

And then the next problem you're going to have is that you're trying to use i in your $.ajax() success callback, but each of those $.ajax() calls is asynchronous so by the time the success callbacks run the loop will have finished and i will be 7. The simplest way to fix that is to use jQuery's $.each() method to iterate over your array (instead of a for loop) so that each ajax call is contained in its own function invocation and gets its own i:

    var cities = ["firenze", "rome", "milan", "venice", "perugia", "urbino"];
    $.each(cities, function(i, city) {
        var strurl.toString = "http://api.aerisapi.com/observations/" + city + ",it?client_id=ZPYsvZLE4U9tkifhy3XMc&client_secret=IwQPYv7GA9XYR0bc9ziJ03ug5H2Tmh1gmxmAybEd";
        $.ajax({
            url: strurl,
            dataType: "jsonp",
            success: function (json) {
                if (json.success == true) {
                    var ob = json.response.ob;
                    var weather = ob.weather.toLowerCase();
                    i++;
                    $('#js' + i + '1').html(city + ': ');
                    $('#js' + i + '2').html(weather);
                    $('#js' + i + '3').html(ob.tempC + '°');
                }
                else {
                    alert('An error occurred: ' + json.error.description);
                }
            }
        });
    });