$http.get failing to retrieve data from PHP backend


AngularJS, PHP, and MySQL: changing ng-repeat data on ng-change

I’ven been working on a web-base system and ng-repeat seems to have error on duplicate keys and I don’t know what to do. The selectall brand seems working fine but the php code I paste below seems doesn’t work and the "track by $index". the code below only display infinite loop or rows in the table

html code

<div class="card-body p-0">
      <!-- DataTales Example -->
      <div class="card shadow mb-4" style="font-size: 0.75rem">
        <div class="card-header py-2">
          <h6 class="m-0 font-weight-bold text-green">Category of {{selectedBrand}}</h6>
        </div>
        <div class="card-body">
          <div class="table-responsive col-xl-12 col-lg-12 col-xl-12"
               ng-disabled="disableTable">
            <table class="table-letters-lg table-hover" id="dataTable" width="0%" cellspacing="0">
              <thead>
                <tr class="bg-gradient-primary" style="color: white">
                  <th>Category ID</th>
                  <th>Category Name</th>
                  <th>Category Code</th>
                </tr>
              </thead>
              <tbody>
                <tr style="cursor: pointer" ng-repeat="categories in prodcategory">
                  <td>{{categories.category_id}}</td>
                  <td>{{categories.category_name}}</td>
                  <td>{{categories.category_code}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

    </div>
</div>

angularjs code

$http.get('database/prodcategory/selectallbrandname_category.php')
  .then(function(z){
    $scope.prodbrand_category = z.data;
});
                        
$http.get('database/prodcategory/selectallbrand_category.php')
  .then(function(y){
    $scope.prodcategory = y.data;
});

$scope.selectBrand = function() {
    if($scope.selectedBrand == "All Brands") {
        $scope.showAllCategoryList();
    }

    else {
        var b_name = $scope.selectedBrand;
        $scope.showBrandCategoryList(b_name);
    }
}
$scope.showAllCategoryList = function() {
    $http.get('database/prodcategory/selectallbrand_category.php')
      .then(function(response){
        $scope.prodcategory = response.data;
    });
}

$scope.showBrandCategoryList = function(brand_name) {
    $http.get('database/prodcategory/selectbrand_category.php', {brand_name: brand_name})
      .then(function(x){
        $scope.prodcategory = x.data;
    });
}

php code

<?php
    require_once '..\connect.php';
    $data = json_decode(file_get_contents("php://input"));
    $brand_name = $data->brand_name;

    try {
        $stmt = $pdo->prepare("SELECT * FROM `prodcategory` INNER JOIN `prodbrand` ON `category_brandid` = `brand_id` WHERE `brand_name` = ?");

        $stmt -> execute([$brand_name]);
  
        $data = $stmt->fetchAll(\PDO::FETCH_ASSOC);
        echo json_encode($data);
    }catch (Exception $e){
        echo $e;
        $pdo->rollback();
        throw $e;
    }
?>

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

One of the $http.get operations is malformed.

ERRONEOUS

$scope.showBrandCategoryList = function(brand_name) {
    $http.get('database/prodcategory/selectbrand_category.php', {brand_name: brand_name})
      .then(function(x){
        $scope.prodcategory = x.data;
    });
}

The second argument of the $http.get method does not carry data, it carries the optional config object.

From the Docs:

$http.get(url, [config]);

  • url string Absolute or relative URL of the resource that is being requested
  • config (optional) Object Optional configuration object. See $http() arguments

AngularJS $http Service API Reference – $http.get

Solution 2

for hours of looking at the angularjs code. It seems $http.get method doesn’t work so I changed it to $http.post.

$scope.showAllCategoryList = function() {
    $http.post('database/prodcategory/selectallbrand_category.php')
      .then(function(response){
        $scope.prodcategory = response.data;
    });
}

$scope.showBrandCategoryList = function(brand_name) {
    $http.post('database/prodcategory/selectbrand_category.php', {brand_name: brand_name})
      .then(function(x){
        $scope.prodcategory = x.data;
    });
}

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply