Creating a fresh instance of an Object from a Service that leverages the $resource

Question

Creating a fresh instance of an Object from a Service that leverages the $resource

I have been enhancing my existing code to improve its functionality by creating two objects for interacting with a RESTful API.

Before, I utilized $http to retrieve the data and return the promise. I would then add some actions using .then and repeat the process by sending additional requests for more data. This resulted in nested $http queries which I want to avoid if possible.

My goal is to have a service (or a factory) that allows me to configure different query parameters and another object for processing and displaying the response.

Here is the current implementation:

var solr1 = angular.module('solr', ['ngResource']);

solr1.run(function(){
    console.log("Module Loaded");
});

solr1.service('solrser', function($resource,solrresult) {
    console.log("In Solrser")
    this.serverurl = 'url';
    this.res = $resource(this.serverurl);

    this.query = function (p) {
        this.res.get(p).$promise.then(function(d) {
         return solrresult(d);
     });
    }
});

solr1.factory('solrresult',function() {
 return function(a) {
  this.data = a;
  this.ready = 0;

  console.log("In Factory")

  this.getdocs = function() {
   console.log("Getting Data")
   console.log(this.data);
   return this.data.docs;   //this is line 9
  }

  return this;
 }});

Controller implementation:

app.controller('app1cont', ['$scope', 'solrser', 'solrresult', function($scope,solrser,solrresult){
    console.log("Start");
    var res = solrser.query({'q':'potato'});
    console.log(res)
    console.log(res.getdocs())
}]);

The output produced is as follows:

Module Loaded solr_module.js:5
In Solrser solr_module.js:9
Start main_controller.js:6
undefined main_controller.js:9
TypeError: Cannot read property 'getdocs' of undefined
    at new <anonymous> (.........../main_controller.js:10:21)
    at Object.e [as invoke] (https://code.angularjs.org/1.3.1/angular.min.js:36:365)
    at F.instance (https://code.angularjs.org/1.3.1/angular.min.js:75:91)
    at https://code.angularjs.org/1.3.1/angular.min.js:58:287
    at s (https://code.angularjs.org/1.3.1/angular.min.js:7:408)
    at G (https://code.angularjs.org/1.3.1/angular.min.js:58:270)
    at g (https://code.angularjs.org/1.3.1/angular.min.js:51:172)
    at g (https://code.angularjs.org/1.3.1/angular.min.js:51:189)
    at https://code.angularjs.org/1.3.1/angular.min.js:50:280
    at https://code.angularjs.org/1.3.1/angular.min.js:18:8 angular.js:11339
In Factory solr_module.js:25

It seems that the factory gets created after the controller continues its execution. What might be the issue here?

javascript ajax angularjs

Answer 1

Answer №1

It seems like there is a timing issue at play here.

app.controller('app1cont', ['$scope', 'solrser', 'solrresult', function($scope,solrser,solrresult){
    console.log("Start");
    var res = solrser.query({'q':'potato'});
    console.log(res)
    console.log(res.getdocs())
}]);

The problem arises when calling solrser.query() as it operates asynchronously to retrieve the data. This means that the res variable will not contain any actual data until the promise is resolved within the "solrser" service. To address this issue, consider modifying your code like so:

solrser.query({'q':'potato'},function(res) {
    console.log(res); 
    console.log(res.getdocs()); 
});  // Alternatively, you could use promises for this...

Furthermore, the way you handle the response inside the solrser service appears to be unconventional.

    this.query = function (p) {
    this.res.get(p).$promise.then(function(d) {
     return solrresult(d);
 });
}

Using return within the promise handler may not yield the desired results. It would be more effective to use a callback or resolve a deferred object. Consider the following approach instead:

    this.query = function (p,callback) {
    this.res.get(p).$promise.then(function(d) {
     callback(solrresult(d));
 });
}

Alternatively, you can utilize promises like this:

this.query = function (p) {
    var defer = $q.defer();
    this.res.get(p).$promise.then(function(d) {
     defer.resolve(solrresult(d));
 });
    return defer.promise;
}

Another option is to pass the get(p).$promise through.

UPDATE:

Since this action is asynchronous, you must use either a promise or a callback. Consider one of the following approaches:

    app.controller('app1cont', ['$scope', 'solrser', 'solrresult', function($scope,solrser,solrresult){
    var res = solrser.query({'q':'potato'},function() {
        res.getDocs();
    });
}]);

Alternatively, you can directly use a callback:

    app.controller('app1cont', ['$scope', 'solrser', 'solrresult', function($scope,solrser,solrresult){
    solrser.query({'q':'potato'},function(res) {
        res.getDocs();
    });
}]);

Answer 2

It seems like there is a timing issue at play here.

app.controller('app1cont', ['$scope', 'solrser', 'solrresult', function($scope,solrser,solrresult){
    console.log("Start");
    var res = solrser.query({'q':'potato'});
    console.log(res)
    console.log(res.getdocs())
}]);

The problem arises when calling solrser.query() as it operates asynchronously to retrieve the data. This means that the res variable will not contain any actual data until the promise is resolved within the "solrser" service. To address this issue, consider modifying your code like so:

solrser.query({'q':'potato'},function(res) {
    console.log(res); 
    console.log(res.getdocs()); 
});  // Alternatively, you could use promises for this...

Furthermore, the way you handle the response inside the solrser service appears to be unconventional.

    this.query = function (p) {
    this.res.get(p).$promise.then(function(d) {
     return solrresult(d);
 });
}

Using return within the promise handler may not yield the desired results. It would be more effective to use a callback or resolve a deferred object. Consider the following approach instead:

    this.query = function (p,callback) {
    this.res.get(p).$promise.then(function(d) {
     callback(solrresult(d));
 });
}

Alternatively, you can utilize promises like this:

this.query = function (p) {
    var defer = $q.defer();
    this.res.get(p).$promise.then(function(d) {
     defer.resolve(solrresult(d));
 });
    return defer.promise;
}

Another option is to pass the get(p).$promise through.

UPDATE:

Since this action is asynchronous, you must use either a promise or a callback. Consider one of the following approaches:

    app.controller('app1cont', ['$scope', 'solrser', 'solrresult', function($scope,solrser,solrresult){
    var res = solrser.query({'q':'potato'},function() {
        res.getDocs();
    });
}]);

Alternatively, you can directly use a callback:

    app.controller('app1cont', ['$scope', 'solrser', 'solrresult', function($scope,solrser,solrresult){
    solrser.query({'q':'potato'},function(res) {
        res.getDocs();
    });
}]);

Answer 3

Answer №2

I've noticed a couple of missing semicolons in your code:

console.log("In Solrser")

should be

console.log("In Solrser");

There is also a missing semicolon here:

console.log("Getting Data")
console.log("In Factory")

Furthermore, there are missing semicolons in your controller as well. This could be the reason why your code isn't working as expected.

To prevent issues like missing semicolons, I recommend using the JSHint plugin in your IDE.

Answer 4

I've noticed a couple of missing semicolons in your code:

console.log("In Solrser")

should be

console.log("In Solrser");

There is also a missing semicolon here:

console.log("Getting Data")
console.log("In Factory")

Furthermore, there are missing semicolons in your controller as well. This could be the reason why your code isn't working as expected.

To prevent issues like missing semicolons, I recommend using the JSHint plugin in your IDE.

Creating a fresh instance of an Object from a Service that leverages the $resource

Answer №1

Answer №2

Similar questions

How can I retrieve the selected items from a Listbox control?

AngularJS allows for filtering unique values per key and retrieving only the checked items

Is there a way to assign the chosen option from a dropdown list to an input field in Vue 3?

Utilize drag and drop functionality to interact with an HTML object element

Tips for sending an HttpResponse and extra information through Ajax on Django

What steps should I follow to generate a table using Ajax and Javascript when a button is clicked?

Sending Data from Clicked Button to Another Component as a Prop

Reaching out to a particular individual with a message

The issue encountered during a POST request in Postman is a SyntaxError where a number is missing after the minus sign in a JSON object at position 1 (line 1

The datetime picker feature in AngularJS ui-grid was malfunctioning

The JavaScript Autocomplete feature fails to clear suggestions when there is no user input detected

The JavaScript function modifies the value stored in the local storage

Innovative computations that change in real-time according to the data at

Executing getJSON requests in perfect synchronization of time

ReactJS state not being updated due to a nested Axios call

Managing window popups using WDIO - tips and tricks

Glistening: sending reactiveValues to conditionalPanel

SSI stands for Server Side Includes, a feature that allows

"An issue arises when using req.body and res.render as the values retrieved are

Generate a new entity using a previously imported model with A-Frame