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

Adding the Authorization header in an Ajax request within ExtJS can be easily done by including the

I've been struggling to upload a file using ExtJS and web API. The issue I'm facing is that when trying to send an authorization header to the server, it always returns as null. I even attempted to include the header in the XHR request within the ...

Different time parameter for setting a timeout in Javascript

I am struggling to create a slideshow with varying time intervals for each image. My knowledge of Javascript is limited, and I have been working on resolving this issue for quite some time. /* function ShowEffect(element){ new Effect.Appear(element, ...

Creating animated effects through Javascript and CSS triggered by user events

As a beginner in javascript and CSS, I am experimenting with creating a simple animation that adjusts the transparency of an image when triggered by an event. However, I am facing an issue where the animation only works every other time the function is cal ...

Ways to discover the titles of every sub-directory

Suppose I have the absolute path of a directory. Is there a method in JavaScript (Node.js) to determine how many sub-directories it has, and retrieve the names of all its sub-directories? I searched online but didn't come across any solution. ...

Tips for eliminating the domain name from the src URL attribute using Jquery

Is there a way to extract the img src attribute and retrieve only the image path without the domain name included? var imgurl = "http://nitseditor.dev/img/home/bg.jpg"; For instance, I would like to display img/home/bg.jpg instead of the full URL. Any id ...

CSS technique for adjustable column width in HTML tables

Important Note: The HTML to PDF rendering engine I am using disables JavaScript by default, so I am seeking solutions that utilize CSS only. Within my report, there is a table utilized for accounting purposes featuring 11 columns: The first column serve ...

Having trouble accessing array elements in react components

When retrieving JSON data for a single student from the server in my React application, I am able to access this.state.info.Firstname but encountering difficulty accessing this.state.info.Father.Firstname. How can I access this information? This is my Rea ...

Struggles with loading order in Knockout.JS

I've encountered an issue with loading my scripts properly for a page utilizing a knockout.js form. Upon page load, my viewmodel js file isn't immediately loaded, resulting in errors that cause the validation messages to flash and hidden divs to ...

What could be causing the "function undefined" error in my HTML document?

Recently, I developed a small chat application that initially functioned well with all code contained in one HTML document. However, after separating the CSS, HTML, and JS into individual files, an issue arose when invoking the register_popup function from ...

Service data not being rendered in Angular template

There seems to be an issue with the template file not displaying data from the service file. I've checked that the data is being passed by the controller, but nothing is showing up except for index. I've tried different ways of data binding with ...

Discover how to capture a clicked word within the Ionic Framework

I've been working on an app using the Ionic Framework. I am trying to figure out how to detect when a word is pressed in my application. One solution I tried involved splitting the string into words and generating a span with a click event for each on ...

What is causing the presence of NaN?

Initially: https://i.stack.imgur.com/2n1Zk.png After Interaction: https://i.stack.imgur.com/Of0pO.png $(document).ready(function () { var output = document.getElementById("whole"); if (!navigator.geolocation) { ...

Acquiring the item by referencing one of its property's values

Imagine you have a JSON structure that looks like this: [ { "name":"Foo" "nickname":"Lorem Ipsum" }, { "name":"Bar" "nickname":"Dolor S ...

Error Interceptor in AngularJS: Retrieving Current User Data from Backend

Seeking assistance with a function that retrieves the logged in user. I must confess that I obtained this code from a tutorial and do not fully comprehend its inner workings. After a period of inactivity (20 minutes), the token expires and invoking getCurr ...

Postponing the findings of a database for a quarter of an hour

Hey there, I'm a new coder and like to dabble in a bit of everything, so go easy on me! So, here's the deal: data from a poker tournament is constantly being updated in a database, but we're delaying the video feed by 20-25 minutes to preve ...

Combining Rails API with AngularJS and IonicFramework

I'm embarking on a new project and feeling unsure about my chosen setup/approach. The project involves creating a list directory that doesn't require high computing power. My initial plan is to develop a website using Rails Api and AngularJs (al ...

PHP is unable to decode JSON that has been converted from JavaScript

When I send an array as a POST request, I first convert it to JSON using the JSON.stringify() method. However, I encountered an issue when trying to decode it in PHP. // JavaScript var arr1 = ['a', 'b', 'c', 'd', & ...

Troubleshooting an issue with importing a Component in ReactJS using material-ui

Using the material-ui library, I attempted to create a Table following the code provided in the Custom Table Pagination Action example. However, I encountered the following error: Error Encountered: Warning: React.createElement: type is invalid -- expect ...

Using AngularJS with ngRepeat allows for the insertion of an extra element every specified number of repeats

I am attempting to establish a layout where every 7 repeated elements, an extra element is inserted. This additional element must be part of the parent container rather than being a child of one of the repeated elements. Simply changing the class is not s ...

Is there a way to automatically fill number fields by clicking on radio buttons using a JavaScript function?

Currently, I am facing an issue with a task that involves three elements: 1. Two Number fields (from standard class) that need to be populated dynamically. 2. A Javascript function designed to extract coordinates using geolocator. 3. A radio button which, ...