1

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

2 ответа 2

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>

0

Сейчас значки для погоды переехали по другому адресу

Подробнее о картинках погоды можно узнать на сайте: https://openweathermap.org/weather-conditions

1
  • Хотя по ссылке можно найти ответ на вопрос, лучше указать здесь самое главное, а ссылку приводить в качестве источника. Если страница, на которую ведет ссылка, будет изменена, ответ-ссылка может стать недействительным. — из очереди проверок
    – insolor
    Commented 23 нояб. 2022 в 12:26

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.