How to fetch and search data in angular js?

Question

I have two functions fetch_orders and search_order in my scope. The fetch_order function works well but when i click the search button, the search_order function executes and displays error saying Error: [ngRepeat:dupes]. These two functions fetch data from the database and displays in the client side. Is there a better way to fetch and search orders?

<div class="order-data" ng-repeat="order in orders" >
    <div class="ordered-product-image">
        <img width="90%"  src="product_images/{{order.product_image}}">
    </div>
    <div class="product-contents">
       <h4>Product</h4>
        <h5 data-ng-bind="order.brand_title"></h5>
        <p data-ng-bind="order.product_title"></p>
        <p data-ng-bind="order.tarif_value_name"></p>
      </div>
</div>


<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src = "js/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('orders-app', []);
    var start = 0;
    var limit = 3;

    var sStart=0;
    var slimit = 3;
    var isSearching=false;
    var sData="";
    var sFilter="";
    var n = 0;
    app.controller("order-content", function($scope, $http){

        $scope.fetch_orders=function(){
            isSearching = false;
            $http.post("_fetch_orders.php", {
                action:"fetch_all",
                "start":start,
                "limit":limit
            }).then(function(success){
                limit+=3;

                if(success.data.length > n){
                    $scope.orders = success.data;
                    n = success.data.length;
                } else {
                    limit-=3;
                }

            });
        }
        $scope.fetch_order();

        $scope.search_order = function(){
            n=0;
            isSearching = true;
            sFilter = $scope.search_filter;
            sData = $scope.search_data;

            if(sFilter!=null){
            $scope.orders=null;
            $http.post("_fetch_orders.php", {
                action: "search",
                start: sStart,
                limit: slimit,
                value: sData,
                column: sFilter
            }).then(function(success){
                    slimit+=3;
                    $scope.orders = success.data;
                });
            }
        }
});
</script>

About the 'better way to do it': it is generally a good way to user services to handle data in your AngularJS app. The official doc is quite complex (in my opinion) but you will find plenty of tutos like this: https://www.w3schools.com/angular/angular_services.asp — SylvainF, Mar 07 '19 at 11:11

score 0 · Accepted Answer · answered Mar 07 '19 at 09:17

First of all, please initialize your $scope.orders variable at the beggining of the function:

$scope.orders = [];

And do not assign null values to it.

About the ngRepeat:dupes error - please check here:

Error: [ngRepeat:dupes] what does this mean?

A side note: It is a good practice not to write on the $scope - try to use the 'controller as' syntax. which was introduced already from angularJS 1.2 (If i remember correctly).

How to fetch and search data in angular js?

1 Answers1