AngularJS TypeError: Unable to read property 'insertBefore' of null

advertisements

I can't seem to wrap my mind around what I am doing wrong here. I am trying to pull json data from a php file and then display it in my Angular app.

My app.js:

var app = angular.module("MyApp", []);

app.controller("ClientHealthCtrl", function($scope, $http) {
    $http.get('json.php').
        success(function(data, status, headers, config) {
            $scope.rows = data;
    }).
    error(function(data, status, headers, config) {
        // log error
    });
});

My HTML:

<body class="skin-black" ng-app="MyApp">
...
<tbody ng-controller="ClientHealthCtrl">
  <tr class="link_back" ng-repeat="Computer in rows">
    <td><a href="#cid={{Computer.id}}">{{Computer.ComputerName}}</a></td>
    <td><i class="fa fa-fw fa-check-square" style="color:#008000;"></i>{{Computer.WmiTest}}</td>
    <td><i class="fa fa-fw fa-check-square" style="color:#008000;"></i>{{Computer.SmsClientService}}</td>
    <td><i class="fa fa-fw fa-check-square" style="color:#008000;"></i>{{Computer.McAfeeFrameworkService}}</td>
    <td><i class="fa fa-fw fa-check-square" style="color:#008000;"></i>{{Computer.RemoteManagement}}</td>
  </tr>
</tbody>

Which results in...

TypeError: Cannot read property 'insertBefore' of null
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:2067:13
    at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:113:18)
    at forEach.after (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:2066:5)
    at Object.JQLite.(anonymous function) [as after] (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:2104:17)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:13294:22
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3745:29
    at Object.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:13293:13)
    at Object.Scope.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:7693:38)
    at Object.Scope.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:7894:24)
    at done (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:8883:20)
    enter code here


Try wrapping the <tr>...</tr> element inside a <div>...</div>.

Looking at the source code of Angular, it is complaining some node has no parent node.

Actually, I found out your question when looking to fix the same error in my code. It's what I did, and it worked.