get Data using angularJS

Question

I'm trying to get Data in HTML Table using angularJS, I've splitted the project in 3 parts :

1- Main Part : main.html : which load html Table file and also the Java script(angularJS) (Main.html)

<div class="panel panel-primary">
    <div class="panel-heading">Student's List</div>
    <div ng-include="'Student_list.html'">
</div>
<script src= "../js/ngMain.js"></script>

2- Html Table : it's Table html tag (Student_list.html)

<table class="table table-borAdherentdered table-hover" id="stdlst">
        <thead>
            <tr>
                <th>Id</th>
                <th>Full Name</th>
                <th>Email</th>
                <th>Birth's Date</th>
                <th>Class</th>
            </tr>
        </thead>
        <tbody>
                <tr ng-repeat="std in students">
                    <td>{{std.Id}}</td>
                    <td>{{std.Name}}</td>
                    <td>{{std.Email}}</td>
                    <td>{{std.BoD}}</td>
                    <td>{{std.Class}}</td>
                </tr>
        </tbody>

    </table>

3- JS File : load data From mySQL (ngMain.js)

var app = angular.module('myApp', []);
 app.controller('myCtrl', function($scope,$http) {

    $scope.GetStudent=function() {
        $scope.students=[];
        $http.post("Main.php",{'ScriptName':'GetData','ScriptParam':'student'+"|"+'Id'+";"+'Name'+";"+'Email'+";"+'BoD'+";"+'Class',"DataTypeResult":'string'})
       .success(function (data,status,headers,config) {
        $scope.students=data;
        console.log("Get Student List succesfully");
      });
    }

});

The php script (Main.php) it's working I have tested using REST app with no problem.

My Problem here : Is that I don't get any Data, only Table Header (BTW :in student Table there is a lot of records) ? Any idea What 's missing ? or if I m doing it wrong please correct me .

Thanks. /Koul

What do you see if you console.log(data) in the success handler? — mindparse
– mindparse, Commented Oct 27, 2015 at 8:45
Where you are calling $scope.GetStudent(); <table class="table table-borAdherentdered table-hover" id="stdlst" data-ng-init="GetStudent()"> Then check are you getting any data inside success function. — vignesh
– vignesh, Commented Oct 27, 2015 at 8:48
That's the problem it does not go thru the function, how to tell to table tag to execute the function GetStudent ? — koul
– koul, Commented Oct 27, 2015 at 9:01
use data-ng-init = <table class="table table-borAdherentdered table-hover" id="stdlst" data-ng-init="GetStudent()"> — vignesh
– vignesh, Commented Oct 27, 2015 at 9:02

Mattex83 · Accepted Answer · 2015-10-27 09:10:28Z

1

I think that the code you posted is incomplete. There are no ng-app and ng-controller at all and the GetStudent function is never called.

However here there is a working fiddler with mock data that I think will help you.

http://jsfiddle.net/ds7hryn5/2/

HTML:

<div ng-app="myApp">
  <div class="panel panel-primary" >
  <div class="panel-heading">Student's List</div>
  <table class="table table-borAdherentdered table-hover" id="stdlst" ng-controller="myCtrl">
       <thead>
         <tr>
            <th>Id</th>
            <th>Full Name</th>
            <th>Email</th>
            <th>Birth's Date</th>
            <th>Class</th>
         </tr>
       </thead>
       <tbody>
            <tr ng-repeat="std in students">
                <td>{{std.Id}}</td>
                <td>{{std.Name}}</td>
                <td>{{std.Email}}</td>
                <td>{{std.BoD}}</td>
                <td>{{std.Class}}</td>
            </tr>
       </tbody>

   </table>
   </div>
</div>

JS

var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope','$http',function($scope,$http) {

  $scope.GetStudent=function() {
    $scope.students=[{
        Id:4,
        Name:'Name1',
        Email:'[email protected]',
        BoD:'bod1',
        Class:'class'
    },{
        Id:5,
        Name:'Name2',
        Email:'[email protected]',
        BoD:'bod2',
        Class:'class'
    },{
        Id:6,
        Name:'Name3',
        Email:'[email protected]',
        BoD:'bod3',
        Class:'class'
    }];

  }
  $scope.GetStudent();

}]);

answered Oct 27, 2015 at 9:10

Mattex83

861 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

koul Over a year ago

I don't want to call the the GetStudent() in JS or in the Main html and I wanted only to Call when the Table html file is loaded.

koul Over a year ago

see this update : jsfiddle.net/ds7hryn5/3 and please tell me why data is not loaded

Mattex83 Over a year ago

If you want to call the GetStudent() only when the table html is loaded I think that you have to create a new Directive with your table as template and its own controller calling the GetStudent function. For further info see docs.angularjs.org/guide/directive

semvdwal · Accepted Answer · 2015-10-27 09:09:06Z

0

It seems to me that your function, $scope.GetStudent, is never called in your controller, thus the data for your table is never fetched. If $scope.students stays empty, you will see only the headers of your table.

To debug these kinds of issues, it is good practice to watch the network tab in your developer tools of the browser you're using, just to see if your data provider (Main.php) is being called. In this case I would suspect that it isn't since there is no call to your $scope.GetStudent function in your provided code.

To call the function when the script is loaded, just add a call ($scope.GetStudent()) in your controller just after your function definition.

Example:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {

    $scope.GetStudent=function() {
        $scope.students=[];
        $http.post("Main.php",{'ScriptName':'GetData','ScriptParam':'student'+"|"+'Id'+";"+'Name'+";"+'Email'+";"+'BoD'+";"+'Class',"DataTypeResult":'string'})
        .success(function (data,status,headers,config) {
            $scope.students=data;
            console.log("Get Student List succesfully");
        });
    }
    $scope.GetStudent();
});

Regards,

Sem

answered Oct 27, 2015 at 9:09

semvdwal

2152 silver badges12 bronze badges

8 Comments

semvdwal Over a year ago

Without calling the function that get's your data, you'll have no data :) Take a look at: docs.angularjs.org/tutorial/step_07 There you will find how to use routes and views to conditionally load your table and controller, so the data is only displayed and retrieved whenever you need it.

koul Over a year ago

did you read my answer below, please have a look and tell me what do you think ?

koul Over a year ago

the situation is simple I think that I don't need routing or multiview or filtering here specially at this stage . I m just asking how to get data from mysql when Table html is loaded not in JS script itself not in the main html file. The idea using 3 parts on my project is also for to get Forms and other Tables .

semvdwal Over a year ago

Using ng-init would be possible on the table, to load the students when the table is loaded. Or you could adjust the method to hide / show the table and include a call to your GetStudents function there.

semvdwal Over a year ago

In answer of your question if you should use php array of json as response, use json, js / angular understands that natively and will process it correctly.

|

Collectives™ on Stack Overflow

get Data using angularJS

2 Answers 2

3 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related