Weather forecast using external API

Question

I am trying to get weather forecast using external API of openweathermap.org, and want to use angular.js so far i am able to get forecast of single city without using API KEY and trying to get forecast of multiple cities with help of API Key as i am not able to find the proper way to do it with api key

So here is clear picture of what i am trying to do

1.The app should accept multiple city names from the user 2. Based on the city names entered, the app should show the the weather forecast for the 14 days for each city

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

var apiKey = '89b59e4d7d07894243b5acd24e7f18a3';
artistControllers.controller('WController', ['$scope', '$http', function($scope, $http) {
console.log('ijij');
$http.jsonp('api.openweathermap.org/data/2.5/forecast/daily?id=524901').success(function(err,data){
if(err){
  console.log(err);
}
$scope.data=data;
console.log(data);
});
}]);

Answer 1

In the documentation is says:

How to use API key

Add the following parameter to the GET request: APPID=APIKEY
Example: api.openweathermap.org/data/2.5/forecast/city?id=524901&APPID=1111111111

OR add the following line to http header of request to the server: x-api-key:APIKEY

So you should be fine by appending the API key behind the url in your $http call.

See: http://openweathermap.org/appid

OR, as the documentation says, you can add an extra header in your HTTP request. You can do that in AngularJS like so:

var req = {
 method: 'GET',
 url: 'api.openweathermap.org/data/2.5/forecast/daily?id=524901',
 headers: {
   'x-api-key': '89b59e4d7d07894243b5acd24e7f18a3'
 }
}

$http(req).success(function(){...}).error(function(){...});

Link: https://docs.angularjs.org/api/ng/service/$http