What is the best method for querying a JSON file using AngularJS?

My Pagination Code:

http://plnkr.co/edit/WmC6zjD5srtYHKopLm7m

This is a brief overview of my code:

var app = angular.module('hCms', []);
app.controller('samplecontoller', function ($scope,  $http) {   
    $scope.showData = function(){   
        $scope.method = 'GET';
        $scope.url = 'homes.json';
        $scope.code = null;
        $scope.response = null;
        $scope.curPage = 0;
        $scope.pageSize = 3;

        $http({method: $scope.method,url: $scope.url}).
            success(function(data, status) {
                $scope.status = status;
                $scope.datalists = data;
            }).
            error(function(data, status) {
                $scope.datalists = data || "Request failed";
                $scope.status = status;
            });

        $scope.numberOfPages = function() {
            return Math.ceil($scope.datalists.length / $scope.pageSize);
        };

    }

});

angular.module('hCms').filter('pagination', function()
{
    return function(input, start)
    {
        start = +start;
        return input.slice(start);
    };
});

The code is functioning well. However, when I search for "Dis" in the search field, which is on page 3, it doesn't return any results. I believe I need to implement the search functionality on $scope.datalist within the controller, rather than as a filter.

Could someone guide me in the right direction or provide some insight on this issue?

Thank you,

H.

Answer №1

I encountered a similar issue in the past - remember to apply a search filter before paginating your data.

      <li class="paginationclass" ng-repeat="item in items | filter:search | pagination: currentPage * itemSize | limitTo: itemSize ">

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

React Component: Issue with conditional "if else" statement not refreshing in return statement

Starting out in React and the front-end field with minimal experience. Currently attempting to dynamically change the color of the "fill" property in a polygon element using React. If the percentage is greater than 50, I want the color to be green; otherw ...

What is the best way to display only li elements that possess a specific class utilizing javascript / jquery?

I have a bunch of li's: <ul> <li class="one"></li> <li class="one"></li> <li class="two"></li> </ul> and I want to display only the ones with the class "one" I attempted something like thi ...

Leveraging Angular to dynamically adjust the height of ng-if child elements based on parent

I'm struggling with a few things in my current setup. I have a view that consists of 3 states - intro, loading, and completed. My goal is to create a sliding animation from left to right as the user moves through these states. Here is the basic struc ...

When using Ionic, the $scope.function is only triggered once and throws an error when clicked again

Last week I wrote a function that extracts a true/false value from a pair of buttons (one for true, one for false) and stores it in a $scope variable. It was working perfectly. $scope.trueOrFalse = function(truefalse) { if (truefalse == false){ ...

While attempting to run the project I downloaded from GitHub using the command npm run serve, I encountered the following error: "Syntax Error: Error: No ESLint configuration found in

After receiving a Vue.js project from GitHub, I attempted to download and run it. However, when I tried the command npm run serve, I encountered an error message: Syntax Error: Error: No ESLint configuration found in C:\Users\User\Desktop&bs ...

What kind of output should a Server Side Component generate?

Recently, I decided to incorporate the NextPage type from Next.js into my component writing routine after hearing it's a beneficial practice. However, I discovered that it only functions properly with client-side components. When attempting to utilize ...

Exploring AngularJS Service: simulating $rootElement and $rootScope for testing purposes

Currently, I am in the process of writing tests for a service responsible for updating meta information on a page. mod.service('MetaSrv', ['$rootScope', '$rootElement', function ($rootScope, $rootElement){ return { updat ...

If the variable is empty, use jQuery ajax to send a request with different data

Below is the code I have written: $(document).ready(function() { cookieanimalid =($.cookie("cookieanimal")); $.ajax({ type: 'POST', url: "/myurl/", data: {cookieanimalid}, success: function ( ...

Discover the path with the power of JavaScript

Imagine I am including a JavaScript file in this manner: <script type="text/javascript" src="http://foo.com/script.js?id=120#foo"></script> Would it be possible to access the GET or hash parameters passed through this? Currently, I achieve t ...

Looking for a solution to fix the VueJS calculator that only works once?

My calculator project using VueJS, HTML and CSS is almost complete. However, I'm facing an issue where it only works once. For example, if I input 6x3, it correctly gives me 18. But if I then clear the result and try to input a new calculation like 3 ...

What are the steps for testing the sample angular-react-native-renderer project?

Has anyone been able to successfully build and test the angular-react-native-renderer sample project from GitHub? I've tried multiple times, but every time it just launches Xcode and hangs. Is this project truly worth exploring for creating iOS apps w ...

issue with manipulating hidden field on the client side

After some troubleshooting, I discovered an issue with a hidden field in my form. Despite changing the value using JavaScript right before submitting the form, on the server side it appeared to be null or empty. The Request.Form["hidAction"] showed as em ...

Issue with jQuery .hover() not functioning as expected

The issue I'm encountering is just as described in the title. The code functions correctly on all divs except for one! $(".complete-wrapper-1").hide(); var panelHH = $(".file-select-wrapper").innerHeight; $(".files-button").hover(function(){ $(" ...

"Error message 'querySelector' property or method is not supported on this object" is displayed when trying to access the website using the machine name in Internet Explorer 11

I am facing an issue with my AngularJS site deployed on IIS in a Windows Server 2012 R2 environment behind the firewall. When accessing the site through RDP on the server and typing in http://localhost/Foo in Internet Explorer 11, everything works fine ...

When attempting to add a variable using the next() function, I encountered an error with the BehaviorSubject. The error message displayed was "this.count.next is not a function"

In my Angular service, there is a variable called count that I need to monitor for updates. Whenever this count variable is updated, I want to assign its new value to another variable in a separate component. import {BehaviorSubject} from "rxjs/BehaviorSu ...

Getting the parameters of a path from the URL's breadcrumb in Vue.js

Currently utilizing Vue Attempting to include path parameters in breadcrumb URLs for my app's router. Looking to achieve something similar to the following: { path: 'pages/gestion/region/:reg', name: 'gestion-depa', ...

Using CSS to customize the appearance of the preview in CKEditor

After successfully integrating CKEditor into my website CMS, I am facing an issue with the Preview button not using stylesheets (CSS). Despite editing the preview.html file located in: Website/ckeditor/plugins/preview/ It appears that the CSS is being ig ...

Enhance the functionality of jqGrid by customizing key bindings for arrow and tab keys

In order to enhance my jqGrid functionality, I am seeking to implement the ability for users to press different keys for specific actions. For example, pressing Enter should save data (which is currently working fine), while pressing the left arrow key sho ...

When using node.js, the Ajax success function is not being executed

Why doesn't success respond? Here is the code I've used: Client-side code: function add(){ var values = formserial(addd); var tok = "abc", var url= 'http://localhost:8181/add'; $.ajax({ type: "POST", ...

What is the distinction between selecting and entering a date input value?

When a user selects a date, it needs to be immediately sent to the server. If they manually type in the date, it should be sent on blur. The issue arises when the oninput event is triggered for each keydown event, causing unnecessary server requests while ...