Exploring AngularJS: Extracting Data Using the GET Method

Question

Exploring AngularJS: Extracting Data Using the GET Method

Here is my Controller:

angular.module('apartmentCtrl', [])

.controller('ApartmentController', function ($scope, $http, Apartment) {
    $scope.loading = true;

    $scope.myLocation = '';

    Apartment.get($scope.myLocation).success(function (data) {
        $scope.apartments = data;
        $scope.loading = false;
    });
});

This is my Service:

angular.module('apartmentService', [])
.factory('Apartment', function ($http) {
    return {
        get: function (myLocation) {
            //return $http.get('/api/apartments');
            return $http({
                method: 'GET',
                url: '/api/apartments',
                //headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                params: {location: myLocation}
            });
        }
    };
});

And here is the HTML part:

<input type="text" name="myLocation" class="form-control" ng-model="myLocation">

I am trying to retrieve data from a GET method using AngularJS and pass it to params. How can I achieve this?

javascript angularjs

Answer 1

Answer №1

To ensure that a value from your form is passed as "location", you need to bind it to your model and then explicitly send it to your factory get function.

Here's a functional example where instead of the $http call, a window alert displays the typed-in data, but the concept remains the same.

http://plnkr.co/edit/fRra6RfQrSZb8rzrm4XF?p=preview

HTML:

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3929d94869f9280919a8b9980c5d39e929a"><span class="__cf_email__" data-cfemail="06636463677e6354482c2132650725252025692e2220">[email protected]</span></a>" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    <form ng-submit="getIt()">
      <input type="text" ng-model="myLocation"/>
      <input type="submit"/>
    </form>

  </body>

</html>

Javascript:

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

app.controller('MainCtrl', function($scope, Apartment) {
  $scope.name = 'World';
  $scope.myLocation = 'Hollywood';

  $scope.getIt = function() {
    Apartment.get($scope.myLocation);
  }
});

app.factory('Apartment', function ($window) {
        return {
            get: function (whatLocation) {
                $window.alert(whatLocation);
            }
        };
    });

Answer 2

To ensure that a value from your form is passed as "location", you need to bind it to your model and then explicitly send it to your factory get function.

Here's a functional example where instead of the $http call, a window alert displays the typed-in data, but the concept remains the same.

http://plnkr.co/edit/fRra6RfQrSZb8rzrm4XF?p=preview

HTML:

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3929d94869f9280919a8b9980c5d39e929a"><span class="__cf_email__" data-cfemail="06636463677e6354482c2132650725252025692e2220">[email protected]</span></a>" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    <form ng-submit="getIt()">
      <input type="text" ng-model="myLocation"/>
      <input type="submit"/>
    </form>

  </body>

</html>

Javascript:

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

app.controller('MainCtrl', function($scope, Apartment) {
  $scope.name = 'World';
  $scope.myLocation = 'Hollywood';

  $scope.getIt = function() {
    Apartment.get($scope.myLocation);
  }
});

app.factory('Apartment', function ($window) {
        return {
            get: function (whatLocation) {
                $window.alert(whatLocation);
            }
        };
    });

Exploring AngularJS: Extracting Data Using the GET Method

Answer №1

Similar questions

What is the best way to load the route calculation dynamically?

Easily transform checkboxes into images using jQuery with no need for external plugins

Angular - when removing items from ngRepeat, the remaining elements do not transition smoothly; instead, they abruptly snap or jump into position

Angular - Javascript - Oops! The variable 'google' seems to have gone missing after reloading the page

Encountering issues with the functionality of async await

It is imperative that the HTML div element remains within the boundaries of the page

Issue with AngularJS directive not recognizing $filter function

Using Ajax/jQuery in combination with Mongodb

Adjust the opacity of a MeshBasicMaterial in real-time

Creating a modal popup when a button is clicked

Fixed position toolbar within a container positioned beside a dynamically sized sidebar navigation

Comparison Between React-Redux mapStateToProps and Inheriting Props from ParentsIn the

Populate a PHP array with designated file types from a designated folder, to later be loaded into a JavaScript array

sending an array variable to ajax in CakePHP

Error: The program is encountering an issue because it is trying to scan a file that is not a directory in the "./src/functions/" path. This error message appears when the program encounters a "

Developer tools indicate React state property is set despite it always being undefined

What is the simplest method for fetching and parsing JSON data with jQuery and JavaScript?

How can I make the cssRenderer layer element transparent so that the webglRenderer layer is visible beneath it in Three.js?

Is there a way to efficiently parse HTML data returned as JSON in the browser using Cordova/Ionic?

Troubleshooting resizing images in React using Material UI's useStyles