Получить иконку с openweathermap

255

26 ноября 2016, 17:57

Есть запрос погоды на сайт 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>

Answer 1

Имеется несколько проблем:

У вас проблемы с разметкой.
Также, посмотрите, что за результат возвращает Ваш запрос.
У Вас не правильно формируется переменная URL2.

Попробуйте вот так.

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; 
      console.log(response.data); 
      vm.URL2 = "http://openweathermap.org/img/w/" + vm.data.list[0].weather[0].icon + ".png"; 
    }). 
  catch(function(response) {}); 
 
 
});

<!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></font> 
 
    <img src='http://openweathermap.org/img/w/13d.png' alt='Icon depicting current weather.'> 
    <div> 
      Можно так 
      <img src="{{vm.URL2}}" alt='Icon depicting current weather.'> 
    </div> 
    <div> 
      А можно и вот так 
      <img ng-src="http://openweathermap.org/img/w/{{vm.data.list[0].weather[0].icon}}.png" alt='Icon depicting current weather.'> 
    </div> 
  </div> 
</body> 
 
</html>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Перерисовать svg на канве

Здравствуйте! Возникла задача - нарисовать и скачать svg, вот такой структуры

279

javascript

Мягкий scroll помогите реализовать

Помогите реализовать мягкий скрол

374

javascript

Как засунуть в html переменную из node express?

Например сервер выдает ответ, красивой страницей html, в которой есть поле в котором нужно вывести сам ответ, ответ хранится в переменной node(например...

334

javascript

Как переместить браузерный alert?

Защита лабыПрепод просит показать, как переместить браузерный alert('sometext'); Можно ли с ним взаимодействовать и как? Либ нет

289