UI Grid Angular, grid renders but doesn't display data
I figured it out, and it appears that my problem was a mixture of two things.
- The incoming JSON was a string, I'm not 100% sure if I needed to convert to an object by using
JSON.parse
then pass it along to the$scope.gridOptions.data
but that could've been the issue for the code I posted in my original question above. After more research I found a great in-depth example in the official Angular UI Grid docs. Following this technique i was able to get the data rendered correctly.
var rowCount = 0; var i = 0; $scope.refreshData = function () { $scope.loading = true; $scope.myData = []; $http.get('/Home/GetAllData') .success(function (response) { var jsonObj = JSON.parse(response); rowCount = jsonObj.length; jsonObj.forEach(function (row) { row.id = i; i++; $scope.myData.push(row); }); $scope.loading = false; }) .error(function() { $scope.loading = false; console.log("Error retrieving data."); }); };
In the example it makes use of a string value in gridOptions.data called myData
which refers to an object on your scope to watch. So what I'm doing is just pushing each row once the GET request completes.
The full example is Here via Punklr.