Pętla powtarzająca zawartość var w js

Question

Witam, mianowicie mam problem jak zrobić pętlę która skróciłaby tego Frankensteina 

Z góry dzięki za każdą podpowiedz 

Oto kod: 

            function favicon(data) {
                var url = 'http://openweathermap.org/img/w/';
                var endl = '.png';

                var img = data.list[0].weather[0].icon;
                var img1 = data.list[1].weather[0].icon;
                var img2 = data.list[2].weather[0].icon;
                var img3 = data.list[3].weather[0].icon;
                var img4 = data.list[4].weather[0].icon;
                var img5 = data.list[5].weather[0].icon;
                var img6 = data.list[6].weather[0].icon;
                var img7 = data.list[7].weather[0].icon;
                var img8 = data.list[8].weather[0].icon;
                var img9 = data.list[9].weather[0].icon;
                var img10 = data.list[10].weather[0].icon;
                var img11 = data.list[11].weather[0].icon;
                var img12 = data.list[12].weather[0].icon;

                var final = url + img + endl;
                var final1 = url + img1 + endl;
                var final2 = url + img2 + endl;
                var final3 = url + img3 + endl;
                var final4 = url + img4 + endl;
                var final5 = url + img5 + endl;
                var final6 = url + img6 + endl;
                var final7 = url + img7 + endl;
                var final8 = url + img8 + endl;
                var final9 = url + img9 + endl;
                var final10 = url + img10 + endl;
                var final11 = url + img11 + endl;
                var final12 = url + img12 + endl;

                $('#ico').attr('src', final);
                $('#ico1').attr('src', final1);
                $('#ico2').attr('src', final2);
                $('#ico3').attr('src', final3);
                $('#ico4').attr('src', final4);
                $('#ico5').attr('src', final5);
                $('#ico6').attr('src', final6);
                $('#ico7').attr('src', final7);
                $('#ico8').attr('src', final8);
                $('#ico9').attr('src', final9);
                $('#ico10').attr('src', final10);
                $('#ico11').attr('src', final11);
                $('#ico12').attr('src', final12);
            }

 

Answer 1

zobacz to czy zadziała:

function favicon(data) {
	var url = 'http://openweathermap.org/img/w/';
    var endl = '.png';
	
	data.list.forEach(function(e, i) {
		$('#ico' + i).attr('src', url + e.weather[0].icon + endl;
	});
}

 

Comments

Funkcja sama w sb działa ale zdjęcia nie są wyświetlane 

---

Poradziłem sb wystarczyło zmienić linię z: 

$('#ico' + i).attr('src', url + e.weather[0].icon + endl);

na

$(`#ico${i}`).attr('src', url + e.weather[0].icon + endl);

Bardzo dziękuję za pomoc 

---

Proszę bardzo :)

Answer 2

function favicon(data) {
   const url = 'http://openweathermap.org/img/w/';
   const endl = '.png';

   for(let i =0; i< data.list.length; i++) {
      const img = data.list[i].weather[0].icon;
      $(`#ico${i}`).atrr('src',  `${url}${img}${endl}`);
   }
}

sproboj tak.

ps. nazwy twoich zmiennych i funkcji nic nie mowia

Comments

Niestety ale wywala mi błąd TypeError: $(...).atrr is not a function

Poradziłem już sb. Dziękuję bardzo za pomoc