how to make $http.get Url dynamic in angularjs

Question

Can we make dynamic url like whenever we select a value from first drop down the url should be http://api.fixer.io/latest?base=value.

It means when we select value(USD) in first drop down the same value apply at the end of the url(http://api.fixer.io/latest?base=USD) and the json data will come from that url.

Answer 1

The ngModel (fromType) on the first select will hold the selected value. So get the data from the $scope.fromType and add that to the url like this

$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

Ok, so basically I made some assumptions here.

1. At start, we should load all rates in the first select ($scope.getAllRates())
2. When a rate is selected in the first select, we should load rates connected to that currency in the other select ($scope.getRate())

If this is the case your view would be 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();
}]);

Here's a plunker

Answer 2

Set ng-model to your select and store that value in $scope. When making request, set that value as a parameter.

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

Answer 3

Just append your ngModel to your request url

$scope.makeRequest = 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.makeRequest();
};

If you need to make different request every time, you need to set your request in a function and call it.