JQuery + Ajax: Ошибка выполнения JavaScript: ожидаемая функция

Question

Я новичок в этом и не нашел ответа на мою проблему в Интернете.

У меня есть следующий скрипт на моей веб-странице asp.net. Это дает мне ошибку, что ожидается функция.

Когда я использую жестко закодированное название города и твердый код id, он работает нормально, но с этого момента я начинаю использовать цикл для динамического изменения 1) используемого URL-адреса, 2) название города и 3) div id, я получаю ошибку. Любые решения? Заранее спасибо!

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

Проблема здесь:

city = cities(i - 1) 

Оно должно быть:

city = cities[i - 1] 

cities переменная является массивом, поэтому доступ к его элементам с [] нотации - ваш код использует круглые скобки, что означает, что JS пытается рассматривать его как функцию вызов.

На мой взгляд, было бы аккуратнее, чтобы не жёстко длина массива в вашем for состоянии, но использовать его свойство .length вместо:

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

А потом следующая проблема, которую вы собираетесь что вы пытаетесь использовать i в своем обратном вызове $.ajax(), но каждый из этих вызовов $.ajax() является асинхронным, поэтому к моменту успешного завершения обратных вызовов цикл будет завершен, а i будет 7. Самый простой способ исправить это. использовать jQuery's $.each() method для перебора ваш массив (вместо цикл), так что каждый вызов Ajax содержится в его собственной функции вызова и получает свой собственный 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); 
       } 
      } 
     }); 
    });