Why is my service running before anything else?

Question

I'm new to services, factories, etc; so there's still a lot I don't understand.

I have a ui-grid. When a row is selected, I want to use that data as a param in a service to get REST data to populate another grid.

This is what I think it should be doing:

gridOne is registered => Row Selected => Send selectedRow.id to Service => Service GETs data => data populates grid 2

This is what its actually doing:

Service GETs data => Error because selectedRow.id is not defined.

01| $scope.gridOne.onRegisterApi = function(gridApi){
02|     $scope.gridOneApi = gridApi
03|     $scope.gridOneApi.selection.on.rowSelectionChanged(null, function(row){
04|         $scope.gridOneSelectedRow = $scope.gridOneApi.selection.getSelectedRows()[0]
05|
06|         // v---Breakpoint on this line triggered before any grid is built---v
07|         myService.getAllObjects($scope.gridOneSelectedRow.id).then(response => {
08|             $scope.grid2.data = response
09|         }
10|     })
11| }

My service looks like this:

app.service('myService', function ($http) {

    return {
        get: getObjects
    }

    function getOjects(id) {
        let url = `http://${domain}/object/${id}`
        return $http.get(url).then(response => {
            return response
        }).catch(error => {
            return error
        })
    }
}

Why is the service function running before everything else?

Answer 1

if you are writing a service, you should not return a object/function/something, your implementation function is used as a constructor to newed up and create instance of your service.

so if you want to use a service, a sample for your myService will be

app.service('myService', function ($http) {
    function getOjects(id) {
        //you should properly replace your domain, may be with the same domain by default if you start from object/...
        let url = `http://${domain}/object/+ id`
        return $http.get(url).then(response => {
            return response.data
        }).catch(error => {
            return error
        })
    }
    this.getAllObjects = getOjects;
})

in case of factory

app.factory('myService', function ($http) {
    function getOjects(id) {
        //you should properly replace your domain, may be with the same domain by default if you start from object/...
        let url = `http://${domain}/object/+ id`
        return $http.get(url).then(response => {
            return response.data
        }).catch(error => {
            return error
        })
    }
    return {getAllObjects: getOjects};
})

and in the injecting end you don't need to change the code the way you are using it to load data, just wrote the code in sync of use and also, I wnder, why you are trying to select before the data is loaded, and inside the handler of row selection you want to call the data when now row is present at all, if the data is not loaded, right? I hope you are loading data for another grid grid2 on selection of a row of grid1 , and then want to load corresponding data related to that row to grid2 .

Feel free to comment, whatever doubt you still have.

Good Luck :)