"Troubleshooting: Why is my AngularJS ng-repeat not displaying my table

My controller is retrieving data from a Spring app, but it's not displaying in the form. However, when I hardcode constants into the data, it works perfectly fine.

Here is my JavaScript controller code:

sampleApp.controller('searchCourseController', ['$scope', '$http',
        function($scope, $http,  $routeParams, ngTableParams ) {
         $scope.courses = {};            

        $scope.searchButton=function () {
            var actionUrl = 'searchCourse';

            var textToSearch = $("#txtTitle").val();
            if (textToSearch.length == 0) {
                alert("Please provide search criteria. Blank search is not allowed");
                /* $("#loader-overlay").fadeOut();
                $("#bg-loader").fadeOut(); */
                return;
            }

            $http.get(actionUrl+"?title="+escape(textToSearch))
            .success(
                function(data, status, headers, config) {
                    $scope.courses = data;
                    console.log($scope.courses);
                })
            .error(
                function(data, status, headers, config) {
                });
        };

        $scope.editCourseButton=function () {
            alert ("edit");
        };

    }]);

And here is the HTML I am using to display the data:

<table class="table">
                                <thead>
                                   <tr>
                                      <th>Course Name</th>
                                      <th>Status</th>
                                      <th class="hidden-xs">Publishing status</th>
                                      <th class="hidden-xs">Group Name</th>
                                      <th class="hidden-xs">Rating</th>
                                   </tr>
                                </thead>
                                 <tbody>
                                   <tr ng-repeat="course in $scope.courses">
                                      <td>{{course.name}}</td>
                                      <td>{{course.courseStatus}}</td>
                                      <td>{{course.coursePublishStatus}}</td>
                                      <td>{{course.courseGroupName}}</td>
                                      <td>{{course.courseRating}}</td>
                                   </tr>
                                </tbody>
                             </table>

It's strange that the same code works with fixed data but not with dynamic data. Any ideas on what could be causing this issue?

Thanks,

Answer №1

It is important to note that you should not reference $scope directly within the view as it is not explicitly defined:

<tr ng-repeat="item in $scope.items">

Instead, you should update this line of code to remove the unnecessary "$scope":

<tr ng-repeat="item in items">

Answer №2

Aside from removing the $scope from $scope.courses within the ng-repeat loop, you might also consider incorporating a $scope.$apply() function in your $http.get success callback to ensure that the scope is updated. This will result in the view reflecting the changes made to the $scope.courses binding following an asynchronous operation.

For instance:

$http.get(actionUrl+"?title="+escape(textToSearch))
 .success(function(data, status, headers, config) {
                $scope.courses = data;

                $scope.$apply(); // implemented $scope.$apply() to update the scope.
                console.log($scope.courses);
            })
        .error(
            function(data, status, headers, config) {
            });
  });

Answer №3

Implementing the search functionality using ng-change as shown below

<input class="form-control" type="text" placeholder="Title" id="txtTitle" ng-change="search()" ng-model="txtToSearch">

resolved the issue, but I am still investigating why it is not functioning properly on the search button. Updated the search controller with the following code:

function SearchCtrl($scope, $http, $location, CS) {
$scope.search = function() {  
    $scope.result = null;
    $http({method: 'GET', url: '/search?title=' + $scope.txtToSearch }).
        success(function(data, status, headers, config) {
            $scope.results = data;
        }).
        error(function(data, status, headers, config) {
            $scope.status = status;
        });     
};

$scope.edit=function(c)
{
    CourseService.set(course);
    $location.path('/edit');
}



}

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

Retrieve information from an external JSON file and display it in a jstree

I am trying to pass JSON data to a jstree object from an external file. The code snippet I have does not seem to be working properly. <script> $.jstree.defaults.core.themes.responsive = true; $('#frmt').jstree({ plugins: [" ...

What are the installation steps for the npm package (math-simple-integrals)?

Hello, I've been attempting to set up the npm package called 'math-simple-integral' but am encountering some difficulties making it function properly. Initially, I utilized math.js and simply included the CDNJS script src <script src ...

Error message: angularjs $routeProvider - the requested route was not found

I have encountered an issue with routing in my AngularJS application that is using RequireJS. The problem is that when I try to route to a specific path, it always defaults back to the root path "/". Interestingly, changing the path from /post to /:post ...

Searching for objects within an array using AngularJS

Search <thead> <th>ID</th><th>Employee</th><th>DoB</th><th>Gender</th> </thead> <tbody ng-repeat="employee in Employee | filter:SearchInput"> <tr ng-c ...

The persistent Bulma dropdown glitch that refuses to close

In the project I'm working on, I have implemented a Bulma dropdown. While the dropdown functions correctly, I am facing an issue when adding multiple dropdowns in different columns with backend integration. When one dropdown is open and another is cli ...

Unable to modify the appearance of a Bootstrap multi-select component

After creating a multi-select feature using Bootstrap styling, I ran into an issue where trying to hide it with style="display:none" did not work as expected. Can someone shed light on why this is happening and provide a solution? <link rel="styles ...

Monitor changes to DOM elements with JavaScript Mutation Observer

Recently, I've been experimenting with a Mutation Observer and using the following configuration: config = { characterData: true, characterDataOldValue: true }; This is the structure of my HTML page: <!DOCTYPE html> <html> <head& ...

Struggling with a character entity in Javascript? Learn how to escape it and avoid any display issues (such as showing

document.title = ("welcome &rarr; farewell"); Trying to display the arrow symbol "→" but it's not showing correctly. Any tips on how to properly escape it? ...

Unable to display the content

Why isn't the text expanding when I click "see more"? Thanks XHTML: <div id="wrap"> <h1>Show/Hide Content</h1> <p> This code snippet demonstrates how to create a show/hide container with links, div eleme ...

Guide on uploading images to a NodeJS server from an Angular 2+ application

I have a NodeJS rest-API that can handle both images and text content in the same function. Currently, I am using multer in my NodeJS server to manage image uploads along with text content. Below is an example code snippet showcasing how I am handling this ...

Holding off on triggering a jQuery Ajax request until a function returns a value

I'm currently facing an issue where an Ajax request is not waiting for a function call to return before executing. The specific scenario involves calling getSelectedMessages to retrieve checkbox values and then passing these values in an array to the ...

Mastering the art of invoking a JavaScript function from a GridView Selected Index Changed event

In my current setup where I have a User Control within an Aspx Page and using Master Page, there's a GridView in the User Control. My goal is to trigger a javascript function when the "Select" linkbutton on the Gridview is clicked. Initially, I succe ...

AngularJS - Implementing a sliding down menu feature with the ng-click directive

Is there a way to modify my menu button so that it slides down and up when clicked, instead of just showing and hiding? HTML: <div class="nav"> <nav class="primary-nav" ng-show="showMenu" ng-class="{true: 'showMenu'}[showMenu]"> ...

What are the methods for distributing a variable in AutoHotkey?

When working in JavaScript, we often utilize the spread operator to spread an array of items, like so: const arr = [1, 2, 3] console.log(...arr) // 1 2 3 Now, in AHK, I am trying to achieve a similar effect: Position := [A_ScreenWidth / 2, A_ScreenHeight ...

Interactive Flow Design Toolkit using React

Looking for a flow chart library in React that can assist me in creating a flow chart similar to the one displayed below. Any suggestions or links to demos would be greatly appreciated. https://i.sstatic.net/w8ZJa.png ...

Adjust the radio button status depending on a data value obtained from a REST API in AngularJS

I have a challenge that involves setting the state of a radio button based on data retrieved from a server in AngularJS. What sets this scenario apart is the requirement to display a div based on a specific condition (when a car has exactly one user assign ...

Embedding complex JSON information into an HTML dropdown menu

Here is a JSON string that I am working with: { "electronics": { "cameras": [ "sony", "nikon", "canon" ], "TV": "none", "laptop": [ "hp", "apple", "sony" ] }, "home": { "furniture": [ ...

The system was unable to load the gRPC binary module due to its absence in the current installation

I recently developed an electron app that utilizes Firebase's real-time database. I followed a tutorial on YouTube and carefully reviewed the documentation on Firebase's website to ensure everything was set up correctly. Here is a snippet of my c ...

What is the most effective way to retrieve cursors from individual entities in a Google Cloud Datastore query?

I am currently working on integrating Google Cloud Datastore into my NodeJS application. One issue I have encountered is that when making a query, only the end cursor is returned by default, rather than the cursor for each entity in the response. For insta ...

Guide on submitting a get form and retrieving the information

Currently, I am employed as a penetration tester for a company. While conducting an analysis of their website, I discovered a vulnerability where CSRF tokens are generated via a GET request to the page localhost/csrf-token and then provided in plaintext fo ...