The information from AngularJS is not appearing in the table

I am currently developing a web application that utilizes AngularJS for SQL connectivity.

While working on my project, I encountered an issue where the data for the "Regional Partner Manager" user is not displaying properly in my table, whereas the data for the "admin" user is showing up just fine.

Below is an excerpt from my JavaScript file:

$scope.getsonvindata = function () {
            $scope.loadimage = true;
            $scope.names = '';
            $scope.resetfilters();
            //$scope.area = location;
            // get sonvin data list and stored in sonvinrpm $scope variable 
            $http.get('/angularwebservice/frmcosonvinrpm4.asmx/frmsonvinrpm', {
                params: {
                    log: log,
                    from: $scope.from,
                    to: $scope.to,
                    pm: pm
                }
            })
            .then(function (response) {
                $scope.sonvinrpm = response.data.procompanysonVin;
                console.log($scope.sonvinrpm);
                //pagination
                $scope.totalItems = $scope.sonvinrpm.length;
                $scope.numPerPage = 50000;
                $scope.paginate = function (value) {
                    var begin, end, index;
                    begin = ($scope.currentPage - 1) * $scope.numPerPage;
                    end = begin + $scope.numPerPage;
                    index = $scope.sonvinrpm.indexOf(value);
                    return (begin <= index && index < end);
                };

                $scope.loadimage = false;
                if ($scope.sonvinrpm == '') {
                    $scope.errormessage = 'Data Not Found... Please Select Correct Date Range';
                }
                else {
                    $scope.errormessage = '';
                }
            });

Below is how I set up my table:

 <table id="table" class="table table-bordered font" style="width: 110%;">
                   <!-- Table headers go here -->
                        </tr>
                    </thead>
                    <tbody>
                    <!-- Table body goes here -->
                        </tr>   
                    </tbody>                                     
                </table>

However, when retrieving data from the web service for the Regional Partner Manager, the following data is returned:

{"procompanysonVin":[{"srno":1,"sonvinid":null,"id":3401,"date":"22-10-2016","day":"Sat       ","company":24,"brand":"QED - TM","zone":"East","location":"Kolkata ","starttime":"10:00","endtime":"12:00","hrs":"02:00:00  ","program":"HBKBH","venuename":" NARAYANA SCHOOL","venue":" SITLA ASANSOL"},{"srno":2,"sonvinid":null,"id":3400,"date":"23-10-2016","day":"Sun       ","company":24,"brand":"QED - TM","zone":"East","location":"Kolkata ","starttime":"10:00","endtime":"12:00","hrs":"02:00:00  ","program":"HBKBH","venuename":"NARAYANA SCHOOL","venue":" BENGAL AMBUJA HOUSING COMPLEX AMBUJA DURGAPUR WEST BENGAL"}]}

Even though the data is present in the web service, it seems that there is an issue with printing the data for the Regional Partner Manager. Why is this happening?

NOTE: Although the admin's data is being displayed correctly in the table, the same is not happening for the regional partner manager's data.

Answer №1

Initially, it seems that you have not called the $scope.getsonvindata function in your code. You have defined the function but it is not being invoked anywhere. Make sure to call it like this:

$scope.getsonvindata();

Furthermore, there are issues with how you have applied filters. Follow this correct method to set the order by filter. First, define the scope:

$scope.predicate = 'venue';
$scope.reverse = true;

Then make sure to apply it to the ng-repeat directive: orderBy:predicate:reverse

You can see a working example at the following link: https://jsfiddle.net/U3pVM/27907/

Answer №2

When using the .then(function () function, you have assigned:

$scope.sonvinrpm = response.data.procompanysonVin;

However, when populating the table, you are referencing data models such as search.zone, search.location, and search.date.

Firstly, ensure the correct key is used for data retrieval.

Secondly, the data retrieved from the http request is an object containing an array.

Therefore, you must use ng-repeat or another iteration method to display the data in the table.

Thirdly, since sonvinrpm is an object, perform a check for null or undefined:

if (!$scope.sonvinrpm) {
    $scope.errormessage = 'Data Not Found... Please Select Correct Date Range';
}

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

In Angular, what is the best way to update the quantity of an item in a Firestore database?

Whenever I attempt to modify the quantity of an item in the cart, the quantity does not update in the firestore database. Instead, the console shows an error message: TypeError: Cannot read properties of undefined (reading 'indexOf'). It seems li ...

The issue of process.server being undefined in Nuxt.js modules is causing compatibility problems

I've been troubleshooting an issue with a Nuxt.js module that should add a plugin only if process.server is true, but for some reason it's not working as expected. I attempted to debug the problem by logging process.server using a typescript modu ...

Submitting a JSPX form to interact with PHP backend

Can a JSP/JSPX form be used to submit data to a PHP file? The PHP file will handle validation and database updates, then send a response back to the same JSP/JSPX form. The process should be done using AJAX with jQuery. What steps are involved in achievi ...

Steps for creating user accounts and saving user information in Firebase's Real Time Database

Can someone please guide me on how to register a user in Firebase and save their additional details such as first name, last name, etc.? I have created a standard registration form in Angular and successfully registered users with their username and pass ...

Troubleshooting tip for React JS: encountered an unexpected object error when trying to import components

I've been working on building a react app with Create React App, and everything was going smoothly until I encountered a frustrating error message: Element type is invalid: expected a string (for built-in components) or a class/function (for composite ...

Issue with Ajax request not redirecting to correct URL

I have been successfully using ajax requests in my document without any issues. I am looking to retrieve the user's coordinates as they load the document and then pass this data on to other methods for distance calculations. On the loading of the ind ...

What is the best way to delete a property from an object in an array using Mongoose? This is crucial!

Doc - const array = [ { user: new ObjectId("627913922ae9a8cb7a368326"), name: 'Name1', balance: 0, _id: new ObjectId("627913a92ae9a8cb7a36832e") }, { user: new ObjectId("6278b20657cadb3b9a62a50e"), name: 'Name ...

Is there a solution for the continuous automatic incrementing of the jQuery UI spinner that occurs when I right-click on it?

Only Linux and Mac OS users are facing this particular issue, indicating a potential bug with the jQuery spinner. The bug also affects the spinner located at the following link: https://jqueryui.com/spinner/ <input class="spinner"/> $(".spinner"). ...

Having trouble utilizing props with Vue axios? Running into an undefined error? Unsure how to properly use props with axios?

https://i.stack.imgur.com/QfCDG.png There seems to be an issue with my saveComment() function in CommentList.vue. It can't find the comments' post_id and causes this error: CommentList.vue?6c27:107 Uncaught TypeError: Cannot read properties of u ...

What is the best way to manage HTML code that is delivered through JSON data?

I am dealing with data from a JSON that is in HTML code format. I need to print it as HTML, but currently it is only printing as a string: "content": "More tests\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class=&bso ...

Encountered an EACCESS error while attempting to generate package.json in Angular

Upon completing the command line "yo angular" and following all the necessary steps, I encountered this error : Screenshot of the error I attempted to run it using "sudo yo angular" but unfortunately, it did not resolve the problem. Does anyone have any ...

Encountering mixed content error on webpack development server

My React based website is currently running on Cloud9 using webpack-dev-server, which serves content over https. However, I have encountered an issue when attempting to make ajax (network) requests to external http links. The error message I receive is: ...

Add value to a progress bar over time until it reaches the designated timeout

I'm struggling to implement a loading bar with a fixed timeout requirement. The goal is for the bar to be completely filled within 5 seconds. While I have successfully created the HTML and CSS components, I am facing difficulty in developing the JavaS ...

JavaScript Promise Handling: using fetch method to retrieve and extract the PromiseValue

I am currently struggling to access the [[PromiseValue]] of a Promise. However, my function is returning a Promise instead and what I really want myFunction to return is the value stored in [[PromiseValue]] of the promised returned. The current situation ...

Attach the keyboard to the screen in a fixed position

How can I keep the keyboard always visible on the screen? The screen contains: one TextInput (multiline) two FlatList Typing in the TextInput is fine, but when interacting with the FlatList, the keyboard disappears. I want the keyboard to remain visib ...

Efficiently converting arrays to strings in JavaScript using mapping techniques

My goal is to retrieve data through AJAX without formatting it as JSON, so I took the initiative to encode it myself. The data I am working with consists of client records: where the pound sign (#) separates the client records, the pipe sign (|) separates ...

Utilizing an Ajax call within "for" loops can result in skipping either odd or even iterations

Seeking assistance because we are facing a challenge that we cannot seem to overcome. Despite researching on platforms like StackOverflow and search engines, implementing a solution or solving the problem remains elusive. The goal is to develop a JavaScri ...

Expand and enhance your content with the Vue Sidebar Menu plugin

Recently, I integrated a side-bar-menu utilizing . My goal is to have a sidebar menu that pushes its content when it expands. Any suggestions on which props or styles I should incorporate to achieve this effect? Below is my Vue code: <template> ...

The `Click()` functionality experiences malfunction in Protractor automation scripts

I am currently automating my tests using Protractor and Appium for an AngularJS website with the Jasmine framework in an iPad simulator. Although the sendkeys() function is working fine for entering the username and password, I am facing issues when clicki ...

Is it possible to apply capitalization or convert the value of props to uppercase in React?

Despite attempting the toUpperCase method, I am unable to capitalize my props value. Here's the code I have: export default function Navbar(props) { return ( <> <div> <nav class="navbar navbar-expand-lg bg-b ...