Error message: Unable to retrieve the length of an undefined property in AngularJS 1.6

I've encountered an issue with the controller that was previously functioning normally. The error message I'm getting points to line 23. (TypeError: Cannot read property 'length' of undefined)

$scope.filteredItems = $scope.list.length;

Below is the complete script:

var appMembers = angular.module('myAppMembers', ['ui.bootstrap']);

appMembers.filter('startFrom', function() {
return function(input, start) {
    if(input) {
        start = +start; //parse to int
        return input.slice(start);
    };
    return [];
}
});
appMembers.controller('membersCrtl', function ($scope, $http, $timeout) {
$http({method: "GET", url: "../angularJS/ajax/getMembers.php"})
.then(function onSuccess(response) {
    var members = response.members;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;
    $scope.list = members;
    $scope.currentPage = 1; //current page
    $scope.entryLimit = 50; //max no of items to display in a page
    $scope.filteredItems = $scope.list.length; //Initially for no filter  
    $scope.totalItems = $scope.list.length;
})
.catch(function onError(response) {
    var members = response.members;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;
    console.log(response);
});
$scope.setPage = function(pageNo) {
    $scope.currentPage = pageNo;
};
$scope.filter = function() {
    $timeout(function() { 
    $scope.filteredItems = $scope.filtered.length;
    }, 10);
};
$scope.sort_by = function(predicate) {
    $scope.predicate = predicate;
    $scope.reverse = !$scope.reverse;
};
});

The file paths and names (appMembers, myAppMembers) are verified correct.

Your assistance with this issue would be greatly appreciated.

Answer №1

Consider substituting $scope.list.length with members.length. Verify that members is indeed an array by outputting the value of response as json.

console.log("response : " + JSON.stringify(response));

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

Error: GeoJson object is not valid - Leaflet and Ajax

After realizing that the $.getJSON method is asynchronous, I decided to switch to using $.ajax in order to keep the information intact. Here is the updated code snippet: $.ajax({async: false, url: "https://nycdatastables.s3.amazonaws.com/2013-08-19T18:22: ...

new cookies are created without human intervention

Working on a project in Next.js and using the react-cookie npm package for managing sessions. I am creating a cookie with the key name "token" and assigning the token value as its value. However, an issue has arisen related to cookies where multiple cooki ...

What is the best way to properly format Scala collection elements for use in AngularJS initialization?

In order to set up a list of String constants for an angularjs autocomplete directive, I inject the values into the relevant Ctrl by defining them in my index.scala.html. The CcyPair is defined as a Scala Enumeration type: <script> angular.modul ...

Exploring the potential of TypeScript with native dynamic ES2020 modules, all without the need for Node.js, while also enhancing

I have a TypeScript application that utilizes es16 modules, with most being statically imported. I am now looking to incorporate a (validator) module that is only imported in debug mode. Everything seems to be functioning properly, but I am struggling to f ...

Tips for including an additional class in an element

I have an image tag with the "kiwi" class, and another class that makes it spin. I want to toggle this second class (called 'elem') when clicking on the play button of my music player. Here is the image tag with the class: <img src="./im ...

`The best way to access a JavaScript variable from PHP`

This is the code snippet I am working on: var daaa=document.getElementById('da').value= year+ "-" +month+ "-" +day; document.form1.bookingsession.focus(); var coords = { "lat": daaa }; $.get('bs.php', coords, function () { ...

Obtain the value of a dynamically selected option

I am facing an issue with my select options where I want the input field to be automatically filled with the 'data-place' value of the selected option whenever it changes. This includes a few dynamic select options. $(function() { // Hand ...

Error: Google chart for Google Maps is not displaying text every 1 unit as expected

I am looking to display all the hAxis labels in my chart. Due to the extensive length of the code exceeding 4000 lines, I will only include what I consider to be crucial: var data = new google.visualization.DataTable(); data.addColumn('string', & ...

Having trouble getting an Angular directive to bind a click event to an external element?

I've been working on creating a unique custom event for toggling with Angular. The directive I'm using is called toggleable. It may sound simple at first, but the tricky part is that I want to be able to use any button or link on the page for to ...

Is the memory efficiency of Object.keys().forEach() in JavaScript lower compared to a basic for...in loop?

Picture a scenario where you have an extremely large JS object filled with millions of key/value pairs, and your task is to loop through each of them. Check out this jsPerf example that demonstrates the different techniques for accomplishing this, highlig ...

Verify whether an option is chosen in CakePHP 3 form

I'm working on a form where users can select Types and each type has an associated color. In my TypesController, I have a function that retrieves the list of types with their IDs, names, and colors. $types = $this->Types->find('list') ...

What is the best way to store the data in the lowest common ancestor for effective communication among multiple identical components within a sibling network?

My Background: I have expertise in Python and Vue development, with a history of using Vue dating back to 2016. One of my clients operates a business focused on weight loss and meal planning: clients pay her for weekly single-page PDF menus that outline t ...

Conflicting jQuery links arise when utilizing version 2.1.4 of jQuery

I have encountered a conflict with the jQuery link while using the LIMITLESS theme. Can someone please assist me in resolving this issue? <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> The conflict is ...

Passing label id as a parameter in ng-init in AngularJS

I am currently learning AngularJS and working on a project that involves fetching label names from a database. The challenge I am facing is how to pass a label id as a parameter and retrieve the corresponding label name. Ideally, I would like this process ...

Discover the best way to utilize the leaflet marker cluster group feature!

I am struggling to create a leaflet marker cluster group and adding all the markers to it. Below is the code I have written, but I keep encountering the error TypeError: L.markerClusterGroup is not a constructor I can't figure out if there is an issu ...

Maximizing the efficiency of Angular Directives combined with JSON

Looking for an efficient method to factorize an Angular Directive designed for displaying charts. After exploring various solutions, I discovered a neat way to implement a directive that showcases a single chart flawlessly. How can I utilize the same dir ...

The formatting of the datepicker-popup is malfunctioning when the initial value is set within the scope

I have implemented the Angular UI bootstrap date picker popup using a custom directive on Plunker (http://plnkr.co/edit/053VJYm1MpZUiKwFTfrT?p=preview): //Module var userModule = angular.module("userModule",['ui.bootstrap']); //Controller userM ...

What impact does nesting components have on performance and rendering capabilities?

Although this question may appear simple on the surface, it delves into a deeper understanding of the fundamentals of react. This scenario arose during a project discussion with some coworkers: Let's consider a straightforward situation (as illustrat ...

Setting default values in Angular dropdown select using TypeScript

How can a default value be set in a Select element? I am attempting to create a time dropdown select with multiple options. Currently, the selectedTimeOption variable correctly identifies if an option is chosen from the dropdown, but it cannot detect a va ...

Unsuccessful execution of JavaScript in returned HTML after being appended with jQuery .load() or .ajax()

I have attempted to use .load() and $.ajax in order to retrieve some HTML that needs to be added to a specific container. However, the JavaScript enclosed within the fetched HTML is not executing when I add it to an element. When employing .load(): $(&ap ...