Unable to load data into table using ng-repeat

Question

Code:

    var app = angular.module('myApp', ['smart-table']);
    app.controller('MyController', function ($scope) {
        $('#get').click(function ($scope)
        {
            $.ajax({
                url: 'JsonProcessor.do',
                type: 'get',
                dataType: 'json',
                success: function (data)
                {
                    $scope.rowCollection = data[0];
                    console.log("Result from Database: ", data[0]);
                    console.log("typeOf json is: " + jQuery.type(data));
                }
            });
            $('#dialog').show();
        });
    });

<div id="dialog" class="bs-example web_dialog">
    <table st-table="rowCollection" class="table table-striped">
        <thead>
            <tr>
                <th>Unique Id</th>
                <th>Date Created</th>
                <th>Doc Url</th>
                <th>Time Stamp</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in rowCollection">
                <td>{{row.ID}}</td>
                <td>{{row.DATE_CREATED}}</td>
                <td>{{row.URL}}</td>
                <td>{{row.TIMESTAMP}}</td>
            </tr>
        </tbody>
    </table>
</div>

Is it because I am not using $http to fetch the data? I tried with $http and it throwing error:

Uncaught TypeError: $http is not a function(anonymous function)
@ (index):197jQuery.event.dispatch 
@ joint.js:4683jQuery.event.add.elemData.handle
@ joint.js:4367

Checking the DOM shows only table header and <tbody> commented out.

I am guessing angular js is conflicting with jquery functions?

You show the jQuery code, but don't tell what the problem is. Then you tell what the problem is with the angular code, but don't show the code. Hard to help. — JB Nizet
– JB Nizet, Commented Oct 9, 2015 at 12:11
the $http error is because you forgot to inject $http to make it available. Using $.ajax is outside angular and needs to notify angular of scope changes with $.apply — charlietfl
– charlietfl, Commented Oct 9, 2015 at 12:11
@JBNizet There's nothing to show. That's all the code I have. — kittu
– kittu, Commented Oct 9, 2015 at 12:13
@charlietfl I tried injecting $http as function ($scope, $http) but it didn't work so I used $.ajax to fetch data. I didn't understand what you meant by notify angular with $.apply ?? — kittu
– kittu, Commented Oct 9, 2015 at 12:15
You said: I tried with $http. I don't see any line of code posted using $http. So, did you try, or didn't you? If you did, where is the code? — JB Nizet
– JB Nizet, Commented Oct 9, 2015 at 12:15

charlietfl · Accepted Answer · 2015-10-09 12:18:02Z

1

Any event outside of angular core that changes the scope needs to notify angular to run a digest cycle to update the view.

Since you are not using angular $http to make the ajax request you will need to do this within the success callback

success: function (data){
    $scope.rowCollection = data[0];
    $scope.$apply();
    console.log("Result from Database: ", data[0]);
    console.log("typeOf json is: " + jQuery.type(data));
}

The error that $http is not a function would mean you did not inject $http into controller

answered Oct 9, 2015 at 12:18

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

5 Comments

kittu Over a year ago

Thanks but I just changed code to angular as suggested by @Magus but one problem is table row is created but empty like this: <td class="ng-binding"></td>

charlietfl Over a year ago

Your properties of the data being used in view must be incorrect

charlietfl Over a year ago

view code shown should work, print the collection in view <pre>{{rowCollection|json}}</pre>

kittu Over a year ago

On the back end I am using Hasp map with key value pairs. Is there a way to retrieve key values in angular. I am confused because console.log(data[0].ID); is printing the value

charlietfl Over a year ago

I'm confused to about that. Copy sample of data and create demo that replicates the problem in a sandbox like plunker

Magus · Accepted Answer · 2015-10-09 12:18:45Z

1

Your problem is that you are trying to mix jQuery and Angular. It is not safe and not recommanded by anyone.

Angular can't know that jQuery is working because you use a jQuery listener (with $('#get').click(...)). If you want to use Angular, just use it. Use the ng-click directive and use the $http service.

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

app.controller('MyController', function ($scope, $http) {
    $scope.get = function() {
        $http.get('JsonProcessor.do').success(function(data) {
            $scope.rowCollection = data[0];
            console.log("Result from Database: ", data[0]);
            console.log("typeOf json is: " + jQuery.type(data));
        });
        $('#dialog').show();
    });
});

<div id="get" ng-click="get()">GET</div>
<div id="dialog" class="bs-example web_dialog">
    <table st-table="rowCollection" class="table table-striped">
        <thead>
            <tr>
                <th>Unique Id</th>
                <th>Date Created</th>
                <th>Doc Url</th>
                <th>Time Stamp</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in rowCollection">
                <td>{{row.ID}}</td>
                <td>{{row.DATE_CREATED}}</td>
                <td>{{row.URL}}</td>
                <td>{{row.TIMESTAMP}}</td>
            </tr>
        </tbody>
    </table>
</div>

answered Oct 9, 2015 at 12:18

Magus

15.1k4 gold badges40 silver badges52 bronze badges

2 Comments

kittu Over a year ago

I am able to see the data in console.log() but the table is printed like this:

<tr ng-repeat="row in rowCollection" class="ng-scope"> 	<td class="ng-binding"></td> 	<td class="ng-binding"></td> 	<td class="ng-binding"></td> 	<td class="ng-binding"></td> </tr>

kittu Over a year ago

So actually there are four rows created but no data displayed

Collectives™ on Stack Overflow

Unable to load data into table using ng-repeat

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related