The search feature in AngularJS with filter appears to be malfunctioning

I've been attempting to use the angularjs filter method for searching, but it doesn't seem to be working correctly. Despite not seeing any errors in the console, the search results aren't showing up. Can someone lend a hand with this?

Below is my controller.js code:

.controller('SearchController', 
            [  
                '$scope', 
                'dataService', 
                '$location',
                '$routeParams',

                function ($scope, dataService, $location, $routeParams){
                    $scope.searchMovies = [ ];
                    $scope.searchCount = 0;

                    var getSearchResult = function (terms) {
                        dataService.getSearchResult(terms).then(
                            function (response) {
                                $scope.searchCount = response.rowCount + ' movies';
                                $scope.searchMovies = response.data;
                                $scope.showSuccessMessage = true;
                                $scope.successMessage = "All movie Success";
                            },
                            function (err){
                                $scope.status = 'Unable to load data ' + err;
                            }
                        );  // end of getStudents().then
                    };
                    if ($routeParams && $routeParams.term) {
                        console.log($routeParams.term);
                        getSearchResult($routeParams.term);
                    }

                }
            ]
        );

The services.js code is as follows:

this.getSearchResult = function (terms) {
            var defer = $q.defer(),
            data = {
                action: 'search',
                term: terms
            }
            $http.get(urlBase, {params: data, cache: true}).
                    success(function(response){
                        defer.resolve({
                            data: response.ResultSet.Result,
                            rowCount: response.RowCount
                        });
                    }).
                    error(function(err){
                        defer.reject(err);
                    });
            return defer.promise;
        };

Take a look at my app.js code:

. when('/search', {
   templateUrl : 'js/partials/search.html',
   controller : 'SearchController'
}).

This is the content of search.html:

<div>
<label>Search: <input ng-model="searchMovie"></label><br><br><br><br>
</div>
<table class="table table-hover table-bordered">
    <thead>
        <tr>
            <th>Title</th>
            <th>Description</th>
            <th>Category</th>       
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="search in searchMovies | filter:searchMovie">
            <td>
                {{search.title}}
            </td>
            <td>
                {{search.description}}
            </td>
            <td>
                {{search.name}}
            </td>
        </tr>   
    </tbody>
</table>

The search data is being fetched from the database and the SQL query has been tested successfully. The issue seems to lie within the angularjs server side. Your assistance is greatly appreciated.

Answer №1

Make sure to assign an alias to the controller in your app.js file


.when('/search', {
  templateUrl : 'js/partials/search.html',
  controller : 'SearchController',
  controllerAs: 'movies',
});

In your search.html file, use the assigned controllerAs value

<div>
<label>Search: <input ng-model="searchMovie"></label><br><br><br><br>
</div>
<table class="table table-hover table-bordered">
<thead>
    <tr>
        <th>Title</th>
        <th>Description</th>
        <th>Category</th>       
    </tr>
</thead>
<tbody>
    <tr ng-repeat="search in searchMovies | filter:searchMovie">
        <td>
            {{movies.search.title}}
        </td>
        <td>
            {{movies.search.description}}
        </td>
        <td>
            {{movies.search.name}}
        </td>
    </tr>   
</tbody>

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

Exploring Angular 4: Embracing the Power of Observables

I am currently working on a project that involves loading and selecting clients (not users, but more like customers). However, I have encountered an issue where I am unable to subscribe to the Observables being loaded in my component. Despite trying vario ...

Passing two variables through a Javascript URL to dynamically update a dropdown menu based on the specified values

What is the best way to send two variables to a JavaScript function in order to modify the dropdown list according to those values? $(document).ready(function() { $("#date").change(function() { $(this).after('<div id="loader">& ...

AngularJS view displays previous data momentarily before transitioning to the updated data upon switching views

My angularJS / nodejs / express app consists of a single page. Upon the initial load, it retrieves data from the database using an API and presents it in a table within the 'home' route. Every 5 minutes, the app updates the data by making another ...

Is it possible for me to save external CDN JavaScript files to my local system?

Normally, I would include scripts from other providers in my application like this: <script src="https://apis.google.com/js/api.js"></script> However, I am considering whether it is feasible to simply open the URL , and then copy and paste th ...

What is the best way to ensure the checkbox functions correctly in this specific situation?

I am utilizing PHP, Smarty, and jQuery in the development of my website. Currently, I am working on implementing checkboxes within a Smarty template. Below is a snippet of my Smarty code related to checkboxes: <table cellpadding="5" cellspacing="0" bor ...

Can someone please point out where this JSON member is defined?

This excerpt from the angular.org website showcases some code: angular.copy <div ng-controller="Controller"> <form novalidate class="simple-form"> Name: <input type="text" ng-model="user.name" /><br /> E-mail: <input type="emai ...

javascript dynamic content remains unaffected by ajax call

I'm a beginner with javascript and I am using a PHP variable to create links dynamically. Here is an example of how the variable is set: $addlink = '<button class="blueBtn btnSmall" id="current'.$product_id.'" onClick=addcart(' ...

Can CSS be used to automatically focus on a div element?

Can CSS be used to set autofocus on a div element? <div class="form-group" style="margin-left:10px"> <label for="organizationContainer" class="nmc-label">@Res.GroupStrings.CreateNewGroupOrganization</label> <div id="organiza ...

AngularJs can manipulate the visibility of elements by showing or hiding them based

I wanted to create a simple hover effect where only the child element of each <li> is displayed when I hover over it. Initially, I set up a ng-show value of false for all elements and tried to change it to true on hover. However, this caused all chil ...

How can you leverage the power of useState in a custom React hook?

Here is a code snippet for a custom hook I created: const useShowBg = () => { const [showBg, useShowBg] = useState(false); return [showBg, useShowBg]; }; export default useShowBg; In my component, I import and use the custom hook like this: im ...

Neglect to notify about the input text's value

Having trouble retrieving the text from a simple <input id="editfileFormTitleinput" type="text>. Despite my efforts, I am unable to alert the content within the input field. This is the code snippet I've attempted: $('#editfileFormTitleinp ...

Using Google Cloud Function to write and read a JSON file

I'm currently tackling a project that involves comparing two JSON files fetched at different time intervals. Essentially, it's a continuous cron job that retrieves a new JSON response from an API every 20 seconds and compares it with the previous ...

Steps for iterating over the "users" list and retrieving the contents of each "name" element

I'm attempting to iterate over the "users" array and retrieve the value of each "name". Although the loop seems to be functioning correctly, the value of "name" is returning as "undefined" four times. JavaScript: for(var i = 0; i < customer.users ...

Display nested array objects of varying levels within VUE

How do I display nested elements on the UI when dynamically generated based on a parent element's selected option (e.g. List)? For example, in the code below, when creating a field and selecting the List option, another nested should appear, and so o ...

The function $http.get in AngularJS is providing an undefined response

In the process of developing a small Angular application, I started with this seed project: https://github.com/angular/angular-seed. The only modifications I made were to the following files: /app/view1/view1.js 'use strict'; angular.mod ...

The functionality of the Javascript window.print() method is limited to a single use

I've been working on an Angular project and I have the following code snippet implemented in one of the components. Everything works fine when I try to print for the first time using the onClickPrint() method, but it doesn't seem to trigger when ...

Leveraging both Vuex and an Event Bus in your Vue application

For some time now, I've been pondering over this question that has been lingering in my mind. My current Vue application is quite complex, with a significant number of components that need to communicate effectively. To achieve this, I have implemente ...

The challenge of transferring documents to the server

There is a form on the webpage where users can select a file and click a button to send it. <form enctype="multipart/form-data"> <input type="file" id="fileInput" /> <button type="button&quo ...

Saving, displaying, and removing a JSON document

As someone new to the world of JavaScript, I am encountering an issue with JavaScript and AJAX. I am aiming to create a function that allows me to add new elements with unique indexes. After saving this information to a JSON file, I want to display it on a ...

What is the process for transforming my JSON array into a FirebaseArray and importing it into Firebase?

Currently, I am dealing with a situation where I have a large JSON file that contains an array. My app's backend is powered by Firebase and I intend to use FirebaseArray to store this data. Creating a FirebaseArray from my Angular app and adding data ...