简体   繁体   中英

AngularJS Help: Connecting a Search Input into an REST Interface

I been studying AngularJS for last few days, however I'm stuck on one section. What I want to do is by allowing the user to input a search (within the input widget of course), I want the search to be connected to Online API (OpenWeatherAPI) and extract JSON data from online. I then want the result to be displays within the webpage.

I already done the source code for extracting JSON data using AngularJS. I'm just stuck on connecting the search query to the API. Here the source code for the extracting the REST API:

9 var app = angular.module('oMoonShine', []); 
10 

11 // Note: Controller To Access Weather Data From OpenWeatherAPI (Content Type: JSON)  
12 app.controller('FetchController', function ($scope, $http) { 
13     $http.get("http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139", request) 
14     .then(function (response) { 
15         if (response.status == 200) { 
16             // Note: Important To Print Your Response To Anaylse The JSON Recieved 
17             // Note: For Example OpenWeatherAPI Add Additional Param So Have it 
18             // Note: Like <code>$scope.info = response.data;</code> To Anaysle It 
19             $scope.info = response.data; 
20         } 
21     }); 
22 

23     // Note: Request Object For Extra Types 
24     var request = { 
25         headers: 'application/json', 
26         method: 'GET' 
27     }; 
28 }); 

This is how you access the data: A working fiddle

HTML:

<div ng-controller="MyCtrl">
   The weather from {{weatherLocation}}
    <p>The wind speed is: {{windSpeed}} and the degree is {{windDegree}}</p>
</div>

The controller:

angular.module('myApp',[]).controller("MyCtrl", MyCtrl);


function MyCtrl($scope, $http) {
    $http.get("http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139").success(function(data){
    $scope.weatherLocation = data.name;
    $scope.windSpeed = data.wind.speed;
    $scope.windDegree = data.wind.deg;

        console.log(data)
    }) 
}

Edit

After reading your comments, see my updated fiddle

<div ng-controller="MyCtrl">
   The weather from {{weatherLocation}}
    <p>The wind speed is: {{windSpeed}} and the degree is {{windDegree}}</p>
    <input type="text" ng-model="location"/>
    <button ng-click="findWeather()">submit</button>
</div>

angular.module('myApp',[]).controller("MyCtrl", MyCtrl);


function MyCtrl($scope, $http) {

    $scope.location = "";

    $scope.findWeather = function(){
    http://api.openweathermap.org/data/2.5/weather?q=washington
            $http.get(" http://api.openweathermap.org/data/2.5/weather?q=" + $scope.location).success(function(data){
    $scope.weatherLocation = data.name;
    $scope.windSpeed = data.wind.speed;
    $scope.windDegree = data.wind.deg;

    }) 
    }
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM