Erste Daten aus metaweather API AngularJS Seite

Ich baue einen einfachen Wetter-App, die das Wetter für jede Stadt bekommt. Für diese API gibt es zwei Phasen: 1) Sie den Namen einer Stadt eingeben, bekommen seine „wo auf der Erde ID“ (WOEID). 2) Verwende die Woid, um nach dem Wetter zu suchen.Erste Daten aus metaweather API AngularJS Seite

Dies ist die API: https://www.metaweather.com/api/

Zum Beispiel: https://www.metaweather.com/api/location/search/?query=london Sie dieses JSON erhalten: [{ "title": "London", "location_type": "Stadt", "WOEID": 44418, "latt_long": "51.506321, -,12714"}]

Für den Anfang nur um die WOEID wäre toll. Es scheitert an der API zu verbinden, aber wenn ich es manuell eingeben funktioniert es.

app.js:

var app = angular.module('weatherApp', []); 
app.controller('weatherCtrl', ['$scope', 'weatherService', function($scope, weatherService) { 
function fetchWoeid(city) { 
    weatherService.getWoeid(city).then(function(data){ 
     $scope.place = data; 
    }); 
} 

fetchWoeid('london'); 

$scope.findWoeid = function(city) { 
    $scope.place = ''; 
    fetchWoeid(city); 
}; 
}]); 

app.factory('weatherService', ['$http', '$q', function ($http, $q){ 
function getWoeid (city) { 
    var deferred = $q.defer(); 
    $http.get('https://www.metaweather.com/api/location/search/?query=' + city) 
     .success(function(data){ 
      deferred.resolve(data); 
     }) 
     .error(function(err){ 
      console.log('Error retrieving woeid'); 
      deferred.reject(err); 
     }); 
    return deferred.promise; 
} 

return { 
    getWoeid: getWoeid 
}; 
}]);

index.html:

<!DOCTYPE html> 
<html ng-app="weatherApp"> 

<head> 
<meta charset="utf-8" /> 
<title>Weather App</title> 
<link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> 
<script>document.write('<base href="' + document.location + '" />');</script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script data-require="[email protected]*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
<script data-require="[email protected]*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
<script src="app.js"></script> 
</head> 

<body ng-controller="weatherCtrl"> 
<form> 
<div class="form-group"> 
    <input class="form-control" type="text" ng-model="city" placeholder="e.g. london" /> 
    <input class="btn btn-default" type="submit" value="Search" ng-click="findWoeid(city)" /> 
</div> 
</form> 
<p ng-show="city">Searching the forecasts for: {{city}}</p> 
<div> 
<h1>WOEID is: {{ place }}</h1> 
<a ng-click="findWeather('london'); city = ''">reset</a> 
</div> 
</body> 

</html>

Quelle

2016-11-20 Chezi Zarur

Es scheint, dass Sie ein Kreuz Origin Problem auftritt. Es sieht nicht so aus, als ob MetaWeather JSONP unterstützt, daher ist die Fehlerbehebung etwas komplizierter. Sie müssen Ihre Seite über einen Server ausführen, der einen Proxy unterstützen kann. Ein solches Beispiel ist https://www.npmjs.com/package/cors-anywhere. Wenn Sie, dass setzen die Standardwerte mit bis dann AJAX ändern Aufruf:

$http.get('http://localhost:8080/https://www.metaweather.com/api/location/search/?query=' + city)

Quelle

2016-11-20 19:28:48

ich dies versuchen. Vielen Dank –

Erste Daten aus metaweather API AngularJS Seite

Antwort

Verwandte Themen