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?

javascriptangularjsangularjs-scope

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

How do I combine Firefox binary specification with adding the Firebug extension when using Selenium?

Presently I am utilizing the code below. var co = require('co'); var WebDriver = require('selenium-webdriver'); var SeleniumServer = require('selenium-webdriver/remote').SeleniumServer; co(function *() { // async var ser ...

javascriptnode.jsseleniumselenium-webdriverfirebug

Ensure that background elements do not become the focus when using MUI backdrop

Currently, we are implementing screen dimming when a custom dialog is open using MUI backdrop. However, even though the screen is "grayed-out," users can still access the items with the keyboard. In the image below, you can see how I move from "show backd ...

javascriptreactjsmaterial-uifocus

The JavaScript in the Laravel file isn't functioning properly, but it works perfectly when incorporated via CDN

Successfully implemented code: <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script> <script type="text/javascript"> var textWrapper = document.querySelector('.ml6 .letters'); textWrapper.in ...

javascriptlaravellaravel-mix

How to style a date and time object using angularjs

What is the best way to convert a PHP datetime object to the format "May-27-1990"? ...

javascriptangularjs

Tips for executing specific javascript on small screens or mobile devices

I am currently in the process of developing a Vue web application that needs to be functional on all devices. I have certain code that should only run on small screens or mobile devices. Right now, I am using an if statement with $(window).width() to achie ...

javascriptvue.jsvuejs2

Unable to access npm run build on localhost

I have developed a web application using react and node.js, and now I want to test it with a production build. After running npm run build in the app directory, I successfully created a build folder. However, when trying to run the application using local ...

javascriptnode.jsreactjsnpm

The audio stops when the ngaudio screen is clicked

When it comes to playing audio using the ngAudio service in AngularJS 1, the following code snippet is commonly used: $scope.audio = ngAudio.load("abc.wav"); $scope.audio.play(); However, some users have reported that after the sound is played, clicking ...

angularjsaudio

Receiving an error message stating "Uncaught SyntaxError: Unexpected token <" in React while utilizing the AWS SDK

Each time I execute 'npm run build' in main.js, an error keeps popping up: Uncaught SyntaxError: Unexpected token < The error vanishes after refreshing the page. Upon investigation, I discovered that two libraries are causing this problem: ...

javascriptreactjsaws-sdkaws-sdk-js

What causes Node.js to be unable to handle requests from Vue.js?

I'm encountering a strange error where Node.js is unable to see the URL address and consistently returns a 404 error. In my Vue.js application, I am making a post request using the axios package when the user clicks a button. The code snippet shows t ...

javascriptnode.jsexpressvue.js

Sending a message in the DELETE route using express.js

I'm having trouble displaying a message after deleting a user. I attempted to use req.session properties and then retrieve them in the GET route, but they seem to not be available. Can anyone suggest a solution for fixing this code? router.get("/", ...

javascriptjquerynode.jsexpress

The `appendTo` function in Ajax is used to swap out the current element

I have been working on sending form data to a Servlet using JQuery and then receiving the response from the same JQuery. Check out the code snippet below. <%-- Document : index Created on : Feb 23, 2015, 8:18:52 PM Author : Yohan --% ...

javascriptjqueryhtmlajax

Only display PHP page content if accessed through an AJAX request, not through directly typing the URL into the address bar

Is there a way to verify if a PHP page has been accessed via an Ajax request? I'm working on a page that displays a form for updating some database data (update.php), but I only want it to be accessible if it is called by a specific page named "change ...

javascriptphpajax

Navigate to a specific section of a webpage with automatic scrolling

I'm developing a Chrome App and incorporating the web view tag, which functions similarly to an iframe. Is there a way to load a webpage inside the web view halfway down the page? I have attempted the following: application.js: $(document).ready(f ...

javascriptjqueryhtmlcssgoogle-chrome-app

Validate input strings in Node.js using Joi to detect and return an error if there are leading or trailing spaces

Looking to set up JOI validation in Node.js that flags errors if a string begins or ends with an empty space. For example: name = "test123" //valid name = "test(space)" or "(space)test" // invalid ...

javascriptnode.jsjoi

Transform a delimited string and an array of objects into a new format

Is there a way to easily convert a delimited string into an array of objects with data binding functionality? ng-list is suitable for arrays of strings. However, I have an array of objects where I want to delimit the text property for easy editing. Works ...

javascriptarraysangularjsangular-nglist

How can we use the useState hook in React to dynamically generate state variables?

I'm currently working on a React app where input fields need to be stored in the state. While I can use the useState hook to easily store these values, the challenge I'm facing is that I don't know what fields are needed since they are retri ...

javascriptreactjsreact-hooksnext.js

Sharing application state between different routes in React Router v4 can be achieved by using methods such

I'm seeking solutions to address the following challenge: Without utilizing any state management library, I solely rely on React. The primary application state is contained within the <MyFoodApp/> component, which includes an array of restaura ...

javascriptreactjsreact-router-v4

State dropdown in Angular dynamically updates based on the country selected

I am in search of a contextual state dropdown menu that is linked to the country, ensuring only relevant states are displayed. I have explored these two solutions for guidance in my project. Angularjs trigger country state dependency angularjs dependant ...

javascriptangularjs

Implementing JavaScript Functions to Trigger Control Key and Plus/Minus Events

In my project, I have a unique set of selectors called A+. By clicking on the A+ button, it has been programmed to initiate the control plus event. Similarly, within the same interface, I also have an A- button that activates the control minus event when ...

javascriptjquery

What is the best way to reorganize an object's properties?

Looking for a way to rearrange the properties of an existing object? Here's an example: user = { 'a': 0, 'b': 1, 'c': 3, 'd': 4 } In this case, we want to rearrange it to look like this: user = { &a ...

javascriptjsonangular