Tips for creating dynamic $http.get URLs in AngularJS

Question

Tips for creating dynamic $http.get URLs in AngularJS

Is it possible to create a dynamic URL where the selected value from the first drop-down menu automatically gets added to the end of the URL like this: .

For example, if we select USD in the first drop-down menu, the URL will become , and the JSON data will be retrieved from that updated URL.

javascript angularjs json angularjs-directive angularjs-scope

Answer 1

Answer №1

When using ngModel on the first select, it will store the selected value. To incorporate this into the URL, fetch the data from $scope.fromType and append it like so:

$http.get('http://api.fixer.io/latest?base=' + $scope.fromType.label).then(function(res) {
    $scope.fromValue = 1;
    $scope.ConvertCurrency();
    var i = 0;
    angular.forEach(res.data.rates, function(value, key) {
        if (key == "USD" || key == "EUR" || key == "CAD") {
            $scope.rates.push({ value: value, label: key });
        }
        i++;
    });
});

Update

I assumed a few things here.

Initially, load all rates in the first select ($scope.getAllRates())
When a rate is selected in the first select, load rates associated with that currency in the other select ($scope.getRate())

If this applies to your scenario, your view should look like this

<div ng-app="CurrencyConv" ng-controller="ConvertCtrl">
    <input type="number" placeholder="0.00" ng-model="fromValue" ng-change="ConvertCurrency();" min='0'>
    <select ng-model="fromType" required ng-change="ConvertCurrency(); getRate();" ng-options="f as f.label for f in rates"></select> 

    <input type="text" placeholder="0.00" ng-model="toValue" ng-change="ConvertCurrency()">
    <select ng-model="toType" required ng-change="ConvertCurrency()" ng-options="f as f.label for f in toRates"></select>
</div>

And the controller

App.controller('ConvertCtrl', ['$scope', '$http', function($scope, $http) {
    $scope.rates = [];
    $scope.toRates = [];

    $scope.toType = {};
    $scope.fromType = {};
    $scope.fromValue = 1;

    $scope.getAllRates = function(){
        $http.get('https://api.fixer.io/latest').then(function(res) {
                angular.forEach(res.data.rates, function(value, key) {
                    if (key == "USD" || key == "EUR" || key == "CAD") {
                        $scope.rates.push({ value: value, label: key });
                    }
                });
            });
    };

    $scope.getRate = function(){
       $scope.toRates = [];
       if(typeof $scope.fromType.label !== undefined){
        $http.get('https://api.fixer.io/latest?base=' + $scope.fromType.label).then(function(res) {
                $scope.fromValue = 1;
                $scope.toValue = 0;
                angular.forEach(res.data.rates, function(value, key) {
                    if (key == "USD" || key == "EUR" || key == "CAD") {
                        $scope.toRates.push({ value: value, label: key });
                    }
                });
                $scope.toType = $scope.toRates[0];
                $scope.ConvertCurrency();
            });
       }
    };

    $scope.ConvertCurrency = function() {
        if($scope.toRates.length > 0){
          $scope.toValue = $scope.fromValue * ($scope.toType.value * (1 / $scope.fromType.value));
        }
    };

    //init
    $scope.getAllRates();
}]);

Feel free to check out the plunker

Answer 2

When using ngModel on the first select, it will store the selected value. To incorporate this into the URL, fetch the data from $scope.fromType and append it like so:

$http.get('http://api.fixer.io/latest?base=' + $scope.fromType.label).then(function(res) {
    $scope.fromValue = 1;
    $scope.ConvertCurrency();
    var i = 0;
    angular.forEach(res.data.rates, function(value, key) {
        if (key == "USD" || key == "EUR" || key == "CAD") {
            $scope.rates.push({ value: value, label: key });
        }
        i++;
    });
});

Update

I assumed a few things here.

Initially, load all rates in the first select ($scope.getAllRates())
When a rate is selected in the first select, load rates associated with that currency in the other select ($scope.getRate())

If this applies to your scenario, your view should look like this

<div ng-app="CurrencyConv" ng-controller="ConvertCtrl">
    <input type="number" placeholder="0.00" ng-model="fromValue" ng-change="ConvertCurrency();" min='0'>
    <select ng-model="fromType" required ng-change="ConvertCurrency(); getRate();" ng-options="f as f.label for f in rates"></select> 

    <input type="text" placeholder="0.00" ng-model="toValue" ng-change="ConvertCurrency()">
    <select ng-model="toType" required ng-change="ConvertCurrency()" ng-options="f as f.label for f in toRates"></select>
</div>

And the controller

App.controller('ConvertCtrl', ['$scope', '$http', function($scope, $http) {
    $scope.rates = [];
    $scope.toRates = [];

    $scope.toType = {};
    $scope.fromType = {};
    $scope.fromValue = 1;

    $scope.getAllRates = function(){
        $http.get('https://api.fixer.io/latest').then(function(res) {
                angular.forEach(res.data.rates, function(value, key) {
                    if (key == "USD" || key == "EUR" || key == "CAD") {
                        $scope.rates.push({ value: value, label: key });
                    }
                });
            });
    };

    $scope.getRate = function(){
       $scope.toRates = [];
       if(typeof $scope.fromType.label !== undefined){
        $http.get('https://api.fixer.io/latest?base=' + $scope.fromType.label).then(function(res) {
                $scope.fromValue = 1;
                $scope.toValue = 0;
                angular.forEach(res.data.rates, function(value, key) {
                    if (key == "USD" || key == "EUR" || key == "CAD") {
                        $scope.toRates.push({ value: value, label: key });
                    }
                });
                $scope.toType = $scope.toRates[0];
                $scope.ConvertCurrency();
            });
       }
    };

    $scope.ConvertCurrency = function() {
        if($scope.toRates.length > 0){
          $scope.toValue = $scope.fromValue * ($scope.toType.value * (1 / $scope.fromType.value));
        }
    };

    //init
    $scope.getAllRates();
}]);

Feel free to check out the plunker

Answer 3

Answer №2

Assign ng-model to the select element and save the selected value in $scope variable. When sending a request, use this value as a parameter.

    $http.get('http://api.fixer.io/latest', { params:{base: $scope.fromType.label}}).then(function(res) {
    });

Answer 4

Assign ng-model to the select element and save the selected value in $scope variable. When sending a request, use this value as a parameter.

    $http.get('http://api.fixer.io/latest', { params:{base: $scope.fromType.label}}).then(function(res) {
    });

Answer 5

Answer №3

To include your ngModel in the request URL, simply append it.

$scope.sendRequest = function(offset){

   $http.get('http://api.fixer.io/latest?base='+$scope.fromType.label).then(function(res) {
    $scope.fromValue = 1;
    $scope.ConvertCurrency();
    var i = 0;
    angular.forEach(res.data.rates, function(value, key) {
        if (key == "USD" || key == "EUR" || key == "CAD") {
            $scope .rates.push({ value: value, label: key });
        }
        i++;
    });
   });
 }

  $scope.ConvertCurrency = function() {


    $scope.toValue = $scope.fromValue * ($scope.toType.value * (1 / $scope.fromType.value));
 $scope.sendRequest();
};

If you require making different requests each time, create a function for your request and invoke it.

Answer 6

To include your ngModel in the request URL, simply append it.

$scope.sendRequest = function(offset){

   $http.get('http://api.fixer.io/latest?base='+$scope.fromType.label).then(function(res) {
    $scope.fromValue = 1;
    $scope.ConvertCurrency();
    var i = 0;
    angular.forEach(res.data.rates, function(value, key) {
        if (key == "USD" || key == "EUR" || key == "CAD") {
            $scope .rates.push({ value: value, label: key });
        }
        i++;
    });
   });
 }

  $scope.ConvertCurrency = function() {


    $scope.toValue = $scope.fromValue * ($scope.toType.value * (1 / $scope.fromType.value));
 $scope.sendRequest();
};

If you require making different requests each time, create a function for your request and invoke it.

Tips for creating dynamic $http.get URLs in AngularJS

Answer №1

Answer №2

Answer №3

Similar questions

What's the Purpose of Using an Arrow Function Instead of Directly Returning a Value in a React Event Handler?

What is the method to deactivate multiple links using jQuery?

Void operation modifies the contents of an array

Iterate over each option in a select dropdown menu and modify them

Ways to identify which arrays within an object contain an element

One method for checking the connectivity status of an IE7-based web browser

A detailed guide on sending Joomla form information to a controller function using Ajax communication

What is the best way to access a key from an object within the map function?

Automated tools and frameworks for the testing of website performance

Validate whether a value in a JSON object on iOS is either false or a string

What is the best way to implement a subquery using EXISTS in Knex?

How to use jQuery to remove the last element from an array when the back button

Jquery assigns the value of the last output to a variable

Retrieving JSON parameters using $http.get in Angular from one URL and then from another source

md-auto-complete problem with search query

Having difficulty validating the field accurately with Angular.js

Understanding AMBARI and Demonstrating How to Set Values in JSON Using REST API

What is causing the backslash character to be removed from my ajax request?

unable to interpret standard object class

Uploading a file using AngularJs