Есть запрос погоды на сайт openweathermap. В JSON ответе есть в поле weather.icon есть id иконки, добавив который в URL ьщжно получить ссылку на картинку погоды. Код: http://jsbin.com/sofonovura/edit?html,js,console,output
Примерно: http://openweathermap.org/img/w/13d.png' alt='Icon depicting current weather.'>
http://openweathermap.org/img/w/13d.png' alt='Icon depicting current weather.'>
Как из кода иконки склеить нормальный адрес для картинки?
Конкретные куски:
<img src='http://openweathermap.org/img/w/13d.png' alt='Icon depicting current weather.'>
<img src=vm.URL2 alt='Icon depicting current weather.'>
<img src=vm.URL2 alt='Icon depicting current weather.'>
И
vm.URL2="http://openweathermap.org/img/w/"+vm.data.weather.icon+".png";
var app = angular.module('jsbin', []);
app.controller('DemoCtrl', function($http) {
var vm = this;
var temp1 = [];
var URL2;
var icon;
var URL = 'http://api.openweathermap.org/data/2.5/forecast/daily';
var request = {
method: 'GET',
url: URL,
params: {
q: 'Petrozavodsk',
mode: 'json',
units: 'imperial',
cnt: '7',
appid: '3ac1f68b653ffbf72a5f782420062771'
}
};
$http(request)
.then(function(response) {
vm.data = response.data;
}).
catch(function(response) {
vm.data = response.data;
vm.URL2 = "http://openweathermap.org/img/w/" + vm.data.weather.icon + ".png";
console.log(vm.data.list[0].weather.icon);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Angular JS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="jsbin">
<div ng-controller="DemoCtrl as vm">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/weatherscript.js"></script>
<script src="weather.js"></script>
<h1><b>{{vm.data.city.name}}</b></h1>
<h1><b>{{vm.data.city.country}}</b></h1>
<font color="red"> <h1><b>temp.day:</b><h1> </font>
<h1><b>{{vm.data.list[0].temp.day}}</b></h1>
<font color="red"> <h1><b>weather.main:</b><h1></font>
<h1><b>{{vm.data.list[0].weather[0].description}}</b></h1>
<!-- влажность работает-->
<font color="red"> <h1><b>humidity:</b><h1></font>
<h1><b>{{vm.data.list[0].humidity}}</b></h1>
<font color="red">
{{vm.data.list[0].weather[0].description}}
<h1><b>{{vm.data.list[0].snow}}</b></h1>
давление работает
<h1><b>{{vm.data.list[0].weather.icon}}</b></h1>
<img src='http://openweathermap.org/img/w/13d.png' alt='Icon depicting current weather.'>
<img src=vm.URL2 alt='Icon depicting current weather.'>
</div>
</body>
</html>