heysharynne heysharynne - 2 years ago 589
Javascript Question

Creating a Weather App using AngularJS and OpenWeather

My task is to display the weather forecast from the API.

I have the following code, but I cannot get the data to show. I just started learning AngularJS and using APIs today, so any sort of help would be much appreciated! Specifically, what is wrong with my code that the weather data will not show?

This is the API I need to use: http://api.openweathermap.org/data/2.5/forecast/daily?q=KansasCity&mode=json&units=imperial&cnt=7&appid=bd82977b86bf27fb59a04b61b657fb6f

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
if(window.StatusBar) {

.controller('OpenWeather', function($scope, $http, $log) {
$scope.city = "Kansas City";
$scope.units = 'imperial';

$scope.change = function() {
var url = 'http://api.openweathermap.org/data/2.5/forecast/daily?q=KansasCity&mode=json&units=imperial&cnt=7&appid=bd82977b86bf27fb59a04b61b657fb6f';
.success(function(data, status, headers, config) {
$scope.main = data.main;
$scope.wind = data.wind;
$scope.description = data.weather[0].description;
.error(function(data, status, headers, config) {
$log.error('Could not retrieve data');


<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Weather App</title>

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
<body ng-app="starter" ng-controller="OpenWeather">
<ion-header-bar class="bar-positive">
<h1 class="title">Kansas City Weather</h1>
<div class="list card">
<div class="item item-avatar">
<img src="img/ionic.png">
<h2>10 Day Forecast</h2>
<p>Kansas City, MO</p>
<div class="item item-avatar">
<p>Temp: {{main.temp}}</p>

Answer Source

You are using $http the wrong way. Is better and cleaner to create a request object and put the params there. Please here is the oficial docs: https://docs.angularjs.org/api/ng/service/$http#usage

And here JSBIN: http://jsbin.com/doqeselile/edit?html,css,js,output

var app = angular.module('jsbin', []);

app.controller('DemoCtrl', function($http) {
  var vm = this;
  var URL = 'http://api.openweathermap.org/data/2.5/forecast/daily';
  var request = {
    method: 'GET',
    url: URL,
    params: {
       q: 'KansasCity',
      mode: 'json',
      units: 'imperial',
      cnt: '7',
      appid: 'bd82977b86bf27fb59a04b61b657fb6f'
    .then(function(response) {
      vm.data = response.data;
    catch(function(response) {
      vm.data = response.data;
<!DOCTYPE html>
  <meta charset="utf-8">
  <title>Angular JS</title>
<body ng-app="jsbin">
  <div ng-controller="DemoCtrl as vm">
    <h1>{{ vm.data | json }}</h1>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download