AngularJS Help: Connecting a Search Input into an REST Interface

Question

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 });

What exactly is your problem? No data displayed? An error message? — Netzdoktor
– Netzdoktor, Commented Aug 16, 2015 at 12:12
Basically connecting the input of search into REST API. So let say I'm searching for Japan. I input it into a search box and then click submit. The word Japan then get added to the URL of the API then I received the information back. What I'm stuck on is basically when I click the "Submit" button, getting that connected to the URL. — user5111186
– user5111186, Commented Aug 16, 2015 at 13:09

Doron Sinai · Accepted Answer · 2015-08-16 13:20:44Z

1

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;

    }) 
    }
}

edited Aug 16, 2015 at 13:20

answered Aug 16, 2015 at 12:17

Doron Sinai

1,1863 gold badges13 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user5111186 Over a year ago

I can do that section, what I mainly looking for is connecting what I submit to the URL which I'm stuck on. Basically when I press the submit button, it put whatever I type into the URL

Doron Sinai Over a year ago

Can you give an example on how you want the url to look like and what data you get from the text box? because I don't see a name of location in the url

user5111186 Over a year ago

OK, the URL look like this:

user5111186 Over a year ago

Thank that I want, I'm sorry about not putting the correct URL in the last comment as my computer just froze when I was halfway typing. Thank for your help

Doron Sinai Over a year ago

If this answer was useful to you, please up vote and accept the answer, thanks

Collectives™ on Stack Overflow

AngularJS Help: Connecting a Search Input into an REST Interface

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related