Error message from Angular stating that the factory function is not recognized as a function within the Controller

I have encountered similar questions in the past, but they often involve missing injections, and I hope that is not the issue in my case.

For my current app project, I am attempting to send a GET request to the server to retrieve a list of modules.

Controller

app.controller('ModulesCtrl', ['$scope','modFact','quizIndexFactory', '$http', function($scope, $http, quizIndexFactory, modFact){

$scope.moduleSet;
$scope.status;

getModules();

function getModules(){
    modFact.getList()
        .then(function (response) {
            $scope.moduleSet = response.data;
        }, function (error) {
            $scope.status = 'unable to load modules in controller: ' + error.message;
        });
}

Factory

app.factory('modFact', ['$http', function($http){
var modFact = {};

modFact.getList = function() {
    console.log("success");
    return $http.get('http://localhost:3000/module');
};

return modFact;
}]);

However, I am encountering an error message specifically pointing to the function call in the controller:

Error: modFact.getList is not a function

Any suggestions? I am following the structure outlined in this blog post:

Answer №1

The controller is receiving arguments in a different order than what is being supplied. In the controller, modFact is actually Angular's $http service, which does not have a getList method.

(Slightly adjusting indentation and spacing to highlight the issue):

[       '$scope','modFact','quizIndexFactory', '$http',
function($scope, $http, quizIndexFactory, modFact) {
    ...
}]

The correct order should be:

[       '$scope', '$http', 'quizIndexFactory', 'modFact',
function($scope, $http, quizIndexFactory, modFact) {
    ...
}]

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

Leveraging AJAX with React Router

Currently tackling a project utilizing React Router, encountering some challenges with data flow. Each page triggers an AJAX call to fetch data for the component. These calls have been placed within componentDidMount: // The following code is in ES6 comp ...

Adjust the appearance of an element based on user selection from a dropdown menu under certain circumstances

I am working on creating a dropdown menu using a JavaScript array. My goal is to display a specific span element when certain options are selected. For instance, I want the span to be shown only when options "a" and "c" are selected, but not when option " ...

Similar to Jquery ajax, Titanium also offers a powerful tool

Currently, I have been making an API call using Titanium in the following way: var url = "http://www.appcelerator.com"; var client = Ti.Network.createHTTPClient({ // callback when data is received onload : function(e) { Ti.API.info("Re ...

Struggling to change the div content with ajax response transmitted through php

I would like to apologize in advance if this question has already been addressed elsewhere. After conducting a search, I came across several relevant posts that have guided me to this point. Below is the form snippet containing 1 input box, a button, and ...

Alert: Prop type error encountered - The prop 'open' must be defined in Snackbar component

Recently, I've been implementing jest snapshot tests into my application. The main focus is on the LoginForm component. render() { return ( ... <DynamicSnack dialogOpen={this.props.dialogOpen} snackOpen={this.props.sna ...

Transferring information from a React form to an ExpressJS backend and then seamlessly redirecting to the PayuMoney platform for secure payment processing

Challenge Overview : I am currently working on the integration of payuMoney in a website built with ReactJS, NodeJS, and Express. The goal is to create a form where users can input their data, and then pass this information to the backend API located in in ...

I am receiving an undefined response from Cheerio when attempting to fetch JSON data

My goal is to create a web scraper and I have successfully downloaded the HTML. Now, with this code snippet, I am attempting to extract the title from my HTML: fs.readFile(__filename.json , function (err, data) { if(err) throw err; const $ = cheerio.load ...

Tracking mouse movements in Angular

I have created a custom directive where I am trying to capture the $document.mousemove event to adjust the position of a div for the purpose of implementing a number slider (e.g. sliding numbers between 1 to 100). <div ng-mousedown="handleDown($event)" ...

"PHP Are You Dealing with Excessive Whitespace

Currently, I am utilizing AJAX to handle the processing of my ChangePassword class, which is an extension of my DataProcessor class. For some reason, every data I receive from the AJAX response seems to have an added whitespace before it, almost like it&ap ...

What is the process of connecting marionette rendered views to the DOM?

I am encountering a challenge with my simple setup using Marionette that I am trying to resolve. My issue lies within a view containing a collection: var MyItemsView = Marionette.View.extend({ template: "#some-template" }); var view = new MyItemsVie ...

What is the best way to create a test for my Vue component using Jest?

Below is the login form component that needs to be tested for various scenarios: Verify successful login with both username and password filled Check for input error when either username or password is left blank Ensure input error is thrown when only us ...

Is there a way for me to prevent the need to open a new window to view the results?

Can someone help me with my code? I want to display results without opening a new window or replacing the current content in the same window. I'm thinking of using AJAX to show results in a dialog window using JQueryUI but I'm not sure how to do ...

Extracting information from a checkbox list displayed within an HTML table

I have a table with multiple rows and two columns in each row. The first column contains text, and the second column consists of checkboxes. While I was able to retrieve the values from the first column, I am struggling to fetch the values of the selected ...

Dynamically remove a MongoDB entry with precision

I'm having trouble deleting an entry in MongoDB based on the id variable. Even when I pass the id as a parameter to the method, it doesn't seem to work. I've double-checked the variable inside the method and I'm confident that it has th ...

Saving props in React-select

I'm currently utilizing react-select to enable multiple selection on my UI. However, I need to extract the props from react-select since I will be sending the selected values to the backend. My query is how can I store the state values in an array for ...

What is preventing me from executing this function more than once?

Having this function: const sliderTextChange = document.getElementsByClassName('slider') // text change const changeSliderText = change => { const sliderLeft = document.getElementsByClassName('switch-left') const sliderRight = ...

ReactJS aligns buttons to the right

I have been attempting to align a button to the far right without success. Here is what I have tried: <Button variant="contained" style={{display: 'flex', justifyContent: 'right'}} color="primary" className="float-right" onClick={ ...

Why isn't the unit test passing when it clearly should be?

I am encountering an issue with testing a simple function that I have created. Despite the fact that the function works correctly in practice, it is not being tested properly... Explanation of how my function operates (While it functions as intended, the ...

How to rename a class of an image tag using jQuery

I need to update the class name in my image tag <img src="img/nex2.jpeg" class="name"> When hovering over with jquery, I want to add a new class to it. After hovering, the tag should appear as follows: <img src="img/nex2.jpeg" class="name seco ...

Tips for eliminating checkboxes from a form

function addCheckbox(){ var labels = document.form1.getElementsByTagName('label'); var lastLabel = labels[labels.length-1]; var newLabel = document.createElement('label'); newLabel.appendChild(Checkbox(labels.length)); ...