Error occurred in AngularJS service due to incorrect data type

Looking to store the URL of a query in an AngularJS service like this:

var mortgageloanService = angular.module('loanstreetIpadAppApp', []);

mortgageloanService.factory('updateTable', function($http) {

return {
        getParams: function() {

        var url = 'https://api.mongolab.com/api/1/databases/angularjs-intro/collections/users?apiKey=terrPcifZzn01_ImGsFOIZ96SwvSXgN9';

                console.log('in service mode');
                console.log(url);
                return $http.get(url);      
    }
};
});

This is my controller.js code

angular.module('loanstreetIpadAppApp')
    .controller('Mortgage_LoanCtrl', function ($location, $scope) {
    $scope.update_result = function(updateTable) {

        updateTable.getParams().success(function(loan){$scope.loan = loan});
        console.log($scope.resulttable);

    };
});

In the view page, there's a button that should call the update_result function. However, clicking on the button results in the following error:

 TypeError: Cannot read property 'getParams' of undefined
    at Scope.$scope.update_result (http://localhost:9003/scripts/controllers/mortgage_loan.js:22:16)
    at http://localhost:9003/bower_components/angular/angular.js:10567:21
    at http://localhost:9003/bower_components/angular/angular.js:18627:17
    at Scope.$eval (http://localhost:9003/bower_components/angular/angular.js:12412:28)
    at Scope.$apply (http://localhost:9003/bower_components/angular/angular.js:12510:23)
    at HTMLButtonElement.<anonymous> (http://localhost:9003/bower_components/angular/angular.js:18626:21)
    at HTMLButtonElement.jQuery.event.dispatch (http://localhost:9003/bower_components/jquery/dist/jquery.js:4430:9)
    at HTMLButtonElement.elemData.handle (http://localhost:9003/bower_components/jquery/dist/jquery.js:4116:28)

Any suggestions for resolving this issue?

Answer №1

To access the factory updateTable within your controller, you must inject it. Update your controller as follows:

angular.module('loanstreetIpadAppApp')
    .controller('Mortgage_LoanCtrl', function ($location, $scope, updateTable) {
    $scope.update_result = function() {

        updateTable.getParams().success(function(loan){$scope.loan = loan});
        console.log($scope.resulttable);

    };
});

Note that I have excluded "updateTable" as a parameter in "$scope.update_result", to prevent overriding the updateTable object within that closure.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Effortless bug tracking in Chrome developer tools

When I'm debugging, I want the code to be displayed in Chrome browser (or another browser like Edge) exactly as it was written. Even when using pretty print, the code still appears unreadable. For example, a block of code written in my IDE: {provideD ...

Utilizing React Hook to fetch initial data in useEffect

Encountered a roadblock while attempting to update a hook when the web socket is triggered with new data. I noticed that the hooks are returning the default values I initialized them with inside my useEffect, whereas during rendering it shows the correct v ...

Tips for maximizing the benefits of debounce/throttle and having a truly dynamic experience

Attempting to implement a similar concept in Vue: props(){ debouncing: {type: Number, default: 0} }, methods: { clicked: _.debounce(function() { this.$emit('click'); }, this.debouncing), } Unfortunately, the code breaks when ...

Tips for refreshing Facebook's og tags

I've been racking my brains over this issue for days, and despite the abundance of similar inquiries, I have yet to find a solution. On my blog-like website, each post requires its own title and description for Facebook articles. I know I can set the ...

Incorporate an external script into your Vue.js application

Seeking to integrate a simple JavaScript script with an external link to the library into my Vue.js application, I have encountered the following: <script type="text/javascript" src="https://my_site/index.js"></script> <link rel="styleshee ...

"Problems with the YouTube API functions: playVideo, pauseVideo, and stopVideo not

Currently, I am working on integrating the YouTube API to control a group of players within a slideshow. My goal is to pause and play videos based on which slide the slideshow is on. I have tried storing the players in an array using the frame's id. W ...

Searching for image labels and substituting the path string

Upon each page load, I am faced with the task of implementing a script that scans through the entire page to identify all image src file paths (<img src="/RayRay/thisisianimage.png">) and then add a specific string onto the file paths so they appear ...

Ways to resolve a blank outcome in the $scope selection choices list?

Currently, I am utilizing AngularJS to create a select dropdown field populated with options from an array. The end user has the ability to add options via an input box. While the $scope successfully adds to the array, the dropdown select box displays "und ...

Obtaining the string representation of an HTML element's DOM in JavaScript without including its child elements

Is there a way to retrieve the HTML element/node without its children as a string? Even though this question may appear similar to another on Stack Overflow: jQuery, get html of a whole element, I'm specifically looking for just the HTML element i ...

Trouble encountered when trying to use an anchor link with the .slideUp jQuery function

Would you be able to assist me with understanding why my anchor links are not functioning correctly? I have 3 anchor links, for example: Google (not working) Yahoo (not working) Facebook (working) Any insights on why Google and Yahoo are not working? &l ...

Challenge with Transferring Data to be Displayed

My issue lies in calling a function with 3 inputs - 2 numbers and 1 string. The two numbers are being passed correctly, but I need the string to be printed within the element. I suspect the problem is related to passing the parameter to an HTML part of th ...

having trouble accessing a JavaScript array in AngularJS

Hey there, I'm currently working on a web application using AngularJS and I'm facing an issue with querying arrays. Check out the code snippet below: var angulararray = []; bindleaselistings.bindleaselistingsmethod().then(function(response) { ...

Error in THREE.js: Failed to retrieve object at http://192.168.8.104:8080/[object%20Object] (Error code: 404) - Module: three.module.js

During my attempt to create a text loader in THREE.js, I encountered an error instead of getting the expected text output. three.module.js:38595 GET http://192.168.8.104:8080/[object%20Object] 404 (Not Found) I made various efforts to resolve this error ...

Header stabilization on scroll

On my webpage, I have a table header positioned in the middle of the page. However, due to the length of the page, I am looking for a way to make the header stay fixed at the top of the browser as the user scrolls down. My query is: Is there a method to k ...

Can the MemoryRouter be successfully nested within the BrowserRouter in a React application?

I've been on a quest for some time now, trying to uncover whether it's feasible to utilize MemoryRouter solely for specific routes while maintaining the use of BrowserRouter in general. My goal is to navigate to a particular component without alt ...

Learn the process of adding asynchronous middleware modules to your express.js application

I'm currently developing an express application that utilizes the node_acl module along with a MongoDB database. I have created a custom module that sets up and configures node_acl asynchronously. This middleware needs to be called as the second piece ...

Tips for extracting data from cells within an HTML table using JavaScript

I am looking to extract the values from a cell of an HTML table in order to store them in a MySQL table using PHP. I prefer to utilize JavaScript instead of jQuery. I have assigned a unique ID to each TR based on the ID field in the MySQL table. Additiona ...

Violation of Content Security Policy directive has occurred

During my full-stack project development, I encountered an issue with the inclusion of the bundle.js file in my base HTML file using a simple script tag. When trying to render the page and utilize the JS functionality, I faced a content security policy vio ...

Performing a modulo operation within a v-for loop

I'm showcasing divs in a loop and I need to assign classes based on the loop index. My goal is to have index 0 and 1 with the class col-6, then indexes 2,3,4 with the class col-4, followed by index 5 and 6 having the class col-6, and so forth. This w ...

What is the solution to fixing the Vue 2 error when using Node 12?

Issue with Node 12: It seems that there is an error related to the node-sass library in Node 12. Error message from Node: node-pre-gyp ERR! node -v v12.1.0 node-pre-gyp ERR! node-pre-gyp -v v0.10.3 node-pre-gyp ERR! not ok ...