Utilizing the angularJS API to retrieve data

Question

Utilizing the angularJS API to retrieve data

I am completely new to AngularJS and feeling overwhelmed.

So I created this file to fetch data from an API with a time filter.

forecast.js

(function() {

angular.module('application').factory('Forecast', ['$http', '$q', function($http, $q){

  var ApiAddr = "api.com/";


  forecast.getResults = function(timeStart, timeEnd){
    // Mapping application variable names with API parameter names
    var httpParams = {
      type: "global",
      time: "minute",
      tsmin: timeStart,
      tsmax: timeEnd
    };
    return $http.get(apiAddr, {
      params: httpParams,
      cache: true
    }).then(function(data){
      return data;
    },
            function(response){
              console.log(
          "HTTP request "+ApiAddr+
          " (with parameters tsmin="+httpParams.tsmin+", tsmax="+httpParams.tsmax+
          ", type="+httpParams.type+", time="+httpParams.time+
          (httpParams.motive ? ", motive="+httpParams.motive : "")+
          (httpParams.vector ? ", vector="+httpParams.vector : "")+
          (httpParams.media ? ", media="+httpParams.media : "")+
          ") failed with "+response.status
        );
        return $q.reject(response);
      }
    );
}];

But I have no clue how to create a controller adapter for this. What type of controller should I use? All the examples I've found are based on fixed JSON files with no parameters.

Additionally, I want to input the time filter in HTML, but I have no idea where to start. The examples I've seen only show how to retrieve data, not send it.

Ps: I have spent 2 days researching this, as I have never worked with front-end programming before.

javascript angularjs api

Answer 1

Answer №1

(function() {

  angular.module('weatherApp', [])
    .factory('WeatherForecast', ['$http', '$q', function($http, $q) {
      var apiAddress = 'api.weather.com';
      var weatherForecastData = {};

      weatherForecastData.getResults = function(startTime, endTime) {
        // Mapping application variables with API parameter names
        var httpParameters = {
          type: "global",
          time: "minute",
          tsmin: startTime,
          tsmax: endTime
        };
        return $http.get(apiAddress, {
          params: httpParameters,
          cache: true
        }).then(function(response) {
          return response.data;
        });
      };

      return weatherForecastData;

    }])
    .controller('MainController', ['$scope', 'WeatherForecast', function($scope, WeatherForecast) {
      $scope.forecastReport = '';

      $scope.getWeatherForecast = function() {
        WeatherForecast.getResults($scope.startTime, $scope.endTime)
          .then(function(report) {
            $scope.result = report;
          }).catch(function(error) {
            $scope.result = '';
            console.error('Failed to retrieve forecast report: ' + error);
          });
      };
    }]);

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="weatherApp" ng-controller="MainController">
  <label>Start Time:
  <input type="text" ng-model="startTime"/></label>
    <label>End Time:
  <input type="text" ng-model="endTime"/></label>
  
  <button ng-click="getWeatherForecast()">Get Weather Forecast</button>
  <hr/>
  <div>
  <b>Weather Forecast:</b>
  </div>
  <pre>{{forecastReport | json}}</pre>
</div>

Answer 2

(function() {

  angular.module('weatherApp', [])
    .factory('WeatherForecast', ['$http', '$q', function($http, $q) {
      var apiAddress = 'api.weather.com';
      var weatherForecastData = {};

      weatherForecastData.getResults = function(startTime, endTime) {
        // Mapping application variables with API parameter names
        var httpParameters = {
          type: "global",
          time: "minute",
          tsmin: startTime,
          tsmax: endTime
        };
        return $http.get(apiAddress, {
          params: httpParameters,
          cache: true
        }).then(function(response) {
          return response.data;
        });
      };

      return weatherForecastData;

    }])
    .controller('MainController', ['$scope', 'WeatherForecast', function($scope, WeatherForecast) {
      $scope.forecastReport = '';

      $scope.getWeatherForecast = function() {
        WeatherForecast.getResults($scope.startTime, $scope.endTime)
          .then(function(report) {
            $scope.result = report;
          }).catch(function(error) {
            $scope.result = '';
            console.error('Failed to retrieve forecast report: ' + error);
          });
      };
    }]);

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="weatherApp" ng-controller="MainController">
  <label>Start Time:
  <input type="text" ng-model="startTime"/></label>
    <label>End Time:
  <input type="text" ng-model="endTime"/></label>
  
  <button ng-click="getWeatherForecast()">Get Weather Forecast</button>
  <hr/>
  <div>
  <b>Weather Forecast:</b>
  </div>
  <pre>{{forecastReport | json}}</pre>
</div>

Answer 3

Answer №2

To incorporate the factory into your controller, follow these steps:

var app = angular.module('app');
app.controller('myController',
      ['$scope', 'Forecast', function($scope, Forecast) { /* access to Forecast */ }]);

Alternatively, you can use a component for a cleaner approach:

app.component('myComponentCtrl', {
       templateUrl: 'template.html',
       controller: myComponentCtrl
})

myComponentCtrl.$inject = ['$scope', 'Forecast'];

function myComponentCtrl($scope, Forecast) {/* ... */}

Answer 4

To incorporate the factory into your controller, follow these steps:

var app = angular.module('app');
app.controller('myController',
      ['$scope', 'Forecast', function($scope, Forecast) { /* access to Forecast */ }]);

Alternatively, you can use a component for a cleaner approach:

app.component('myComponentCtrl', {
       templateUrl: 'template.html',
       controller: myComponentCtrl
})

myComponentCtrl.$inject = ['$scope', 'Forecast'];

function myComponentCtrl($scope, Forecast) {/* ... */}

Utilizing the angularJS API to retrieve data

Answer №1

Answer №2

Similar questions

Can Express.Multer.File be inserted into a FormData object easily?

Achieving successful functionality with position:relative in IE9

Issue with Node.js connection to MySQL database resulting in timeout error (ETIMEDOUT)

Javascript Prompt Cancel Button fails to function as intended

Tips for keeping the current tab active when a link opens a new tab using Javascript

The initial axios GET request fails to retrieve data upon the first click

Employing passport-steam alongside sails-generate-auth

Issue with Pop Up not redirecting correctly after a successful login in Azure AD

Using a string as a key for an object's property

Generate Bootstrap 5 Navbar <li> and <ul dropdown item> dynamically using JavaScript

Discovering which particular check in the Express Validator is causing the errors can be done by following these steps

send array to the sort function

Toastr - encountering a problem with the settings

Filtering an array in Node.js using multiple terms

Identifying issues in jQuery code - What could be causing this error?

AngularJS failing to load controller for my specific scenario

Creating a dynamic checkbox feature in Angular using iterations

Is it feasible to completely erase the coding history of a website that has been indexed

Tips for storing a GET response in a variable using ExpressJS and LocomotiveJS

Checking the status of an Xmlhttp request when the URL is inaccessible, all without the use of libraries