Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

using the data returned from server in angular ngrepeat

What I've been trying to do is get a data from the server using $http service of angular.js and then use the returned data in my template using ng-repeat directive. But the problem is that the data fetched are not being displayed at all, and the ng-repeat directive is generating like a number rows, except the one that it should. I am using PHP to render data. This is the javascript part:

    function display($scope, $http){
      $scope.s= "?s=Spice";
      $http({method: "GET", url: "getlistangular.php"+$scope.s}).
       success(function(data){
        alert("success");
        $scope.list= data;
       }).
       error(function(){
        alert("failed");
           });
     }

This is the script in php (spname, spprice, imgsrc are column names in mysql 'spice' table):

    $t = $_GET['s'];
    $query= mysql_query("select * from $t");

    echo "[";
    while ($row = mysql_fetch_array($query))
    {
    echo "{img:'".$row[imgsrc]."', name:'".$row[spname]."', price:'".$row[spprice]."'},\n";
    }
    echo "];";

& this is the template part:

    <table ng-controller="display">

                <tr>
                    <th> </th> <th> Name </th> <th> Price (Rs.) </th>
                </tr>
                <tr ng-repeat="con in list">
                    <td><input type="checkbox" class="regular-checkbox" value={{con.name}}><img src="{{con.img}}"/></td>
                    <td>{{con.name}}</td>
                    <td>{{con.price}}</td>
                </tr>

            </table>

Am new to this angular.js thing, so if you find it a silly question, i apologize for it.

Thanks in advance!

like image 553
Wolv3rine Avatar asked Mar 18 '26 03:03

Wolv3rine


2 Answers

Javascript Should be this :

var app = angular.module('myApp', []);

app.controller('displayCtrl', function($scope, $http) {
   $scope.s= "?s=Spice";
  $http({method: "GET", url: "getlistangular.php"+$scope.s, isArray: true}) //change here
    .success(function(response){
       alert("success");
       $scope.list= response; //change here
    })
    .error(function(){
       alert("failed");
    });
 });

HTML Part :

<table ng-controller="display">

Replace to :

<table  ng-controller="displayCtrl">

And

 <html>

Replace To

    <html ng-app="myApp">

See DEMO HERE

like image 177
Nitish Kumar Avatar answered Mar 19 '26 15:03

Nitish Kumar


The problem was basically in the php part..the solution is to return a json array in key:value format instead of creating it using echo:

    echo "[";
while ($row = mysql_fetch_array($query))
{
echo "{img:'".$row[imgsrc]."', name:'".$row[spname]."', price:'".$row[spprice]."'},\n";
}
echo "];";

should be replaced by:

    $arr = array();
while ($row = mysql_fetch_array($query))
{
$arr[] = array( 'img' => $row['imgsrc'], 'name' => $row['spname'], 'price' => $row['spprice'] );
}

echo json_encode(array('data' => $arr));
like image 26
Wolv3rine Avatar answered Mar 19 '26 15:03

Wolv3rine



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!