Single Angular Controller w/ multiple $HTTP Get request

Question

I have two mongoose schemas running in on my server end. I would like to add two $http.get request in my app.js and eventually display two tables from my collection in MongoDB on a webpage. Only one get function is called without errors.

server.js

//Data Schema
var tempSchema = new mongoose.Schema({
    topic: String,
    message: Number,
    when: Date
}, {collection: "temperature"});

var humiditySchema = new mongoose.Schema({
    topic: String,
    message: Number,
    when: Date
}, {collection: "humidity"});

var temperature =mongoose.model('temperature', tempSchema);
var humidity =mongoose.model('humidity', humiditySchema);

app.js

app.controller("FormController", function ($http, $scope){
    $http.get("/api/temperature")
        .then(function (response) {
            $scope.temperatures = response.data;
        });
})

app.controller("FormController", function ($http, $scope){
    $http.get("/api/humidity")
        .then(function (response) {
            $scope.humiditys = response.data;
        });
})

Also thinking of how I can display both collections on the webpage. Using ng-repeat. Unfortunately I cannot paste my HTML code here.

I would appreciate any help I can get. Thanks

Do the indexes match up for the data that should go together? so `temperatures[0]` would go with `humiditys[0]`? — , Dec 22 '16 at 20:21
You suppose to put ajax calls in the service and not the controller — serge, Dec 22 '16 at 20:28
@ProfessorAllman Sorry sir, I'm fairly new to the platform please can you be a little more explicit. — Ekom, Dec 22 '16 at 20:29
You need to define a factory like so: `factory("ScriptService", ["$q", "$rootScope", function($q, scope) {` but use your own name. I'll put it in the answer — serge, Dec 22 '16 at 20:31

Manu Obre · Accepted Answer · 2016-12-22T21:13:04.307

0

Another way you could handle the $http requests is by creating an Angular Factory.

angular.module('myApp.services',[])

add.factory('ApiService', function($http) {
    return {
        getHumidity: function() {
            return $http.get("/api/humidity");
        },
        getTemperature: function() {
            return $http.get("/api/temperature");
        }
    }
})

Then inside your controller, you should do the following (Note that you must inject the factory as a dependency for the controller)

angular.module('myApp.controllers',[])
    .controller("FormController", function (ApiService, $scope){
         function getHumidity() {
            var promise = ApiService.getHumidity();
            promise.then(
                function(response) {
                    $scope.humiditys = response.data;
                },
                function(errorPayload) {
                    console.log(errorPayload);
                });
        };

        function getTemperature() {
            var promise = ApiService.getTemperature();
            promise.then(
                function(response) {
                     $scope.temperatures = response.data;
                },
                function(errorPayload) {
                    console.log(errorPayload);
                });
        };

        getHumidity();
        getTemperature();

    })

then where you define your angular App (app.js in most of the cases):

angular.module('myApp', ['myApp.controllers','myApp.services'])
    .run(...)
    .config(...)
    ...

edited Dec 22 '16 at 21:13

answered Dec 22 '16 at 20:36

Manu Obre

2,254
1
12
12

Do I create the angular factory as a separate JS file? – Ekom Dec 22 '16 at 20:46
functionality speaking is the same. But in terms of best practices you better create a new file. – Manu Obre Dec 22 '16 at 20:50
Okay I just added created a separate JS file and added the first part of the code. Is there anything else I need to add? Just trying to be sure I got it right. – Ekom Dec 22 '16 at 21:05
Check again, I updated the answer just to be more clear. – Manu Obre Dec 22 '16 at 21:13
Thank you so much for your help. But I must say I think i'm bit confused on where I should place the file above. I would appreciate a little guidance. – Ekom Dec 22 '16 at 22:32
Could you please provide a plunkr or a jsfiddle so I cal help you. – Manu Obre Dec 22 '16 at 22:35
Please find my Plunkr link [link](https://plnkr.co/edit/8euBOLLfDfncOQkeCcZS?p=catalogue) – Ekom Dec 22 '16 at 23:01
I would appreciate your effort. Thanks – Ekom Dec 23 '16 at 04:33
I fixed a few items, please check https://plnkr.co/edit/ccXaGYJ4Cj0UYgDVFtnh?p=preview – Manu Obre Dec 23 '16 at 12:10
Thanks for your response. Just added the changes you made. i'm getting these errors in the web console [screen shot](http://i67.tinypic.com/2z69s0g.png) – Ekom Dec 23 '16 at 16:42
Fix the path of your files added in the index – Manu Obre Dec 23 '16 at 16:48
I was able to fix some error on my own but this I don't under [this](http://i64.tinypic.com/11v1obk.png) – Ekom Dec 23 '16 at 17:13
Your getting that error due to a not found request method. Seems like your API is not up. Or the path for your GET calls should be different. – Manu Obre Dec 23 '16 at 17:25

Single Angular Controller w/ multiple $HTTP Get request

1 Answers1