Having difficulty assigning an argument to an HTTP get request in AngularJS

I am new to working with AngularJS and I am attempting to pass an integer argument to an HTTP GET request in my controller. Here is a snippet of my code:

(function() {
    angular
        .module('myApp.directory', [])

        .factory('NewsService', function($http) 
        {
            return {
                getallnews: function() {
                    return $http.get('get_all_news_feed.php?page='+pageNumber);
                }
            };
        })

        .factory('NewsFeed', function(directoryService) {
            var NewsFeed = function() {
                this.items = [];
                this.busy = false;
                this.pageNumber = 1;
            };

            NewsFeed.prototype.nextPage = function() {
                if (this.busy) return;
                this.busy = true;

                NewsService.getallnews().success(function(data) {
                    var itemData = data;

                    for (var i = 0; i < itemData.length; i++) {
                        this.items.push(itemData[i]);
                    }

                    this.pageNumber++;
                    this.busy = false;
                }.bind(this));
            };
            return NewsFeed;
        })

        .controller('MyController', function(NewsFeed, NewsService) {
            var inst = this;
            inst.news = new NewsFeed();

        });         
})();

I am developing a news feed application where news items are retrieved from the get_all_news_feed.php page, and I need to include a parameter called pageNumber. This is essential for implementing infinite scrolling functionality in AngularJS.

However, I am encountering an undefined error. Do you have any suggestions on how to resolve this issue?

Answer №1

Update the factory function to include pageNumber as an argument

getallnews: function(pageNumber) {
    return $http.get('get_all_news_feed.php?page='+pageNumber);
}

Remember to provide the pageNumber when invoking the function

NewsService.getallnews(this.pageNumber)

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

Traverse Through Collection of Vue Elements

I am working on creating an array of Vue Components based on a configuration file containing various UI sections to display; const config = [ 'summarySection', 'scoreSection', 'educationSection' ] I am attempting to ma ...

Tips for declaring a particular type during the process of destructuring in Typescript

I have my own custom types defined as shown below: export type Extensions = | '.gif' | '.png' | '.jpeg' | '.jpg' | '.svg' | '.txt' | '.jpg' | '.csv' | '. ...

Error: JSX elements that are next to each other must be contained within a parent tag

I am trying to display articles on a page using ReactJS, but I encountered an issue where I need to wrap enclosing tags. It seems like React doesn't accept identical tags next to each other. How can I effectively show tabular data? render() { r ...

Mongoose, Angular, and Express are not functioning properly when using the PUT method

I'm having trouble with implementing a basic edit function in my application. The delete and get functions are working fine, but I keep encountering a 500 error when trying to make a put request. I've attempted using findByIdAndUpdate and FindOne ...

Guide to attaching data to an AJAX request

I'm new to ajax and recently encountered an issue while working on a project where I needed to send a query from an HTML form. However, I've been unable to send any data for some reason. I tried sending FormData through the xmlhttprequest.send() ...

Is it possible to leverage specific client-side Javascript APIs on the server-side?

Exploring APIs designed for web browsers that require their .js code to return audio streams. In a broader sense, these APIs provide byte streams (such as audio) for playback in the browser. Is it possible to use these APIs in server-side Javascript frame ...

Oops! SAPUI5 is encountering an issue with reading property '0' of undefined

Is there a possibility of encountering multiple errors leading to this specific error message? https://i.stack.imgur.com/RpWhw.png Despite searching online, it appears that the error occurs in the JavaScript file when getelementbyid returns null. However ...

"The changes made to the list are not being accurately displayed by Angular's ng

I am working on a directive that injects dynamic templates during ng-repeat. While I can successfully add items to the list, they do not appear in the view for some reason. It seems like I am missing a crucial piece to make it work correctly. You can find ...

Adding items to the array is only effective when done within the loop

My approach involves retrieving data from an API using axios, organizing it within a function named "RefractorData()," and then pushing it onto an existing array. However, I have encountered a problem where the array gets populated within a forEach loop, a ...

React JS functionality does not support Bootstrap tooltips

I'm attempting to implement a tooltip in my React app, but I'm experiencing issues with it not displaying properly. I am utilizing vanilla Bootstrap for this purpose. I've included the following script tag in my index.html file to import the ...

Image not located: 404 error in JavaScript

I am currently working with JavaScript and have encountered an issue. I have an array of objects that contain various data such as id, title, price, and image. I need to retrieve this data from the array in order to display it. While I am able to successfu ...

Sending data from an AngularJS app to Google App Engine using HTTP post

I'm facing a small issue where I am unable to successfully POST my data (comments) to the GAE datastore using angularjs. Can you please help me identify what's wrong with the following angularjs "post" or html code? ANGULAR: $scope.addComment = ...

A simple guide on how to surround every incorrect input index in mapped inputs with red borders

I am incorporating a modal that corresponds each element of the object newCompanies to a specific row: {newCompanies.map((company, index) => { return ( <div> <div className="side- ...

The quiet harmony of FeathersJS and Socket.io as they attentively listen to events is

I've been working hard to get everything set up and running smoothly, but it seems like I'm stuck on the last piece of the puzzle. Despite following the documentation closely, I can't seem to figure out what I'm missing. Here is the @an ...

What are your thoughts on combining a JSON object with HTML?

When using ASP.NET MVC, it is possible to return a JSONResult. return JSON(new { View = RenderViewAsString("MyView", model), wasSuccessful = true}) This approach combines HTML and data in a single JSON object. The goal is to utilize strongly typed HtmlHe ...

Tips for correctly cloning a table row:

Currently, I am engaged with a Django project that involves incorporating a form within a table structure. <table name="mytable" id="table_purchase" role="grid"> <thead> <tr> <th class="text-center" hidden>No</th& ...

Steer clear of 405 errors by implementing AJAX in combination with Flask and JINJA templ

Hey there, I'm fairly new to backend work so please bear with me. I've been doing some research but haven't found the answer yet. Currently, I'm working on an application that fetches search results from a 3rd party API. I'm tryi ...

NPM is having trouble locating a shell script

An error is encountered when running npm run build: '.' is not recognized as an internal or external command, operable program or batch file. Here is the npm file that contains relevant scripts: "scripts": { "postinstall": "jspm instal ...

Generate user-customized UI components from uploaded templates in real-time

Summary: Seeking a solution to dynamically generate UI pages using user-provided templates that can be utilized for both front-end and back-end development across various use cases. Ensuring the summary is at the top, I am uncertain if this question has b ...

Making an input field in Vue automatically read-only when a specific value is met

Is it possible to make an input field read-only in Vue.js based on data values? Here's a situation: <select class="form-control" id="selectCategory" :readonly="cat_id >= 1" name="cat_id"> I'm looking for a wa ...