TypeError: Cannot read property 'first_name' of undefined from sql data variable

26 views

Skip to first unread message

Andrej Batarilo

unread,

May 26, 2018, 4:10:13 AM5/26/18

to Angular and AngularJS discussion

Here is the complete error:

ERROR TypeError: Cannot read property 'first_name' of undefined

at Object.eval [as updateRenderer] (AppComponent.html:26)

at Object.debugUpdateRenderer [as updateRenderer] (core.js:11940)

at checkAndUpdateView (core.js:11312)

at callViewAction (core.js:11548)

at execComponentViewsAction (core.js:11490)

at checkAndUpdateView (core.js:11313)

at callWithDebugContext (core.js:12204)

at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:11882)

at ViewRef_.push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges (core.js:9692)

at core.js:5086

I would appreciate the help so much

I'm sure my database info is correct in the connection php file and everything, but I can't seem to load data from the

 $scope.names = data;  

Here is my entire html code:

 <html>  
      <head>  
           <title>Webslesson Tutorial | AngularJS Tutorial with PHP - Fetch / Select Data from Mysql Database</title>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
      </head>  
      <body>  
           <br /><br />  
           <div class="container" style="width:500px;">  
                <h3 align="center">AngularJS Tutorial with PHP - Fetch / Select Data from Mysql Database</h3>  
                <div ng-app="myapp" ng-controller="usercontroller" ng-init="displayData()">  
                     <label>First Name</label>  
                     <input type="text" name="first_name" ng-model="firstname" class="form-control" />  
                     <br />  
                     <label>Last Name</label>  
                     <input type="text" name="last_name" ng-model="lastname" class="form-control" />  
                     <br />  
                     <input type="submit" name="btnInsert" class="btn btn-info" ng-click="insertData()" value="ADD"/>  
                     <br /><br />  
                     <table class="table table-bordered">  
                          <tr>  
                               <th>First Name</th>  
                               <th>Last Name</th>  
                          </tr>  
                          <tr ng-repeat="x in names">  
                               <td>{{x.first_name}}</td>  
                               <td>{{x.last_name}}</td>  
                          </tr>  
                     </table>  
                </div>  
           </div>  
      </body>  
 </html>  
 <script>  
 var app = angular.module("myapp",[]);  
 app.controller("usercontroller", function($scope, $http){  
      $scope.insertData = function(){  
           $http.post(  
                "insert.php",  
                {'firstname':$scope.firstname, 'lastname':$scope.lastname}  
           ).success(function(data){  
                alert(data);  
                $scope.firstname = null;  
                $scope.lastname = null;  
                $scope.displayData();  
           });  
      }  
      
      $scope.displayData = function(){  
           $http.get("select.php")  
           .success(function(data){  
        
                $scope.names = data;  
                
           });  
      }  
 });  
 </script>  

Reply all

Reply to author

Forward

0 new messages