Display data from SQL database to HTML page in table format using Angular JS
-
Hi, I want to fetch data from SQL database, and display the same on my HTML page in table format using Angular JS. I am able to get the data in the scope variable, but it is not getting displayed in the HTML page. Please check the code that I have written below, and help me fixing the issue. Thanks in advance. HTML code: <html> <head> <title>:: View Logs ::</title> <script src="Scripts/angular.js"></script> <script src="Scripts/angular.min.js"></script> <script src="Scripts/logsController.js"></script> <script src="Scripts/jquery-2.1.1.js"></script> <script src="Scripts/jquery-2.1.1.min.js"></script> </head> <body>
Log ID
User Type
User Name
Email ID
Action Type
Section Name
Section Details
DateTime
User IP
{{item.LogID}}
{{item.UserType}}
{{item.UserName}}
{{item.EmailID}}
{{item.ActionType}}
{{item.SectionName}}
{{item.SectionDetails}}
{{item.DateTime}}
{{item.UserIP}}
</body> </html> logsController.js code: angular.module('ViewLogsApp', []) .controller('ViewLogsController', [ '$scope', function ($scope) { $scope.logslist = []; $scope.load; $scope.load = function () { $.ajax({ type: 'GET', contentType: 'application/json; charset=utf-8', url: 'UserActivityLogs.aspx/getList', success: function (data) { $scope.logslist = data $scope.$apply(); } }); } $scope.load(); } ]); WebMethod code: [System.Web.Services.WebMethod] [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)] public static List getList() { SqlConnection con = new SqlConnection(); con.ConnectionString = _connstr; con.Open(); var logs = new List(); string get = "select * from
-
Hi, I want to fetch data from SQL database, and display the same on my HTML page in table format using Angular JS. I am able to get the data in the scope variable, but it is not getting displayed in the HTML page. Please check the code that I have written below, and help me fixing the issue. Thanks in advance. HTML code: <html> <head> <title>:: View Logs ::</title> <script src="Scripts/angular.js"></script> <script src="Scripts/angular.min.js"></script> <script src="Scripts/logsController.js"></script> <script src="Scripts/jquery-2.1.1.js"></script> <script src="Scripts/jquery-2.1.1.min.js"></script> </head> <body>
Log ID
User Type
User Name
Email ID
Action Type
Section Name
Section Details
DateTime
User IP
{{item.LogID}}
{{item.UserType}}
{{item.UserName}}
{{item.EmailID}}
{{item.ActionType}}
{{item.SectionName}}
{{item.SectionDetails}}
{{item.DateTime}}
{{item.UserIP}}
</body> </html> logsController.js code: angular.module('ViewLogsApp', []) .controller('ViewLogsController', [ '$scope', function ($scope) { $scope.logslist = []; $scope.load; $scope.load = function () { $.ajax({ type: 'GET', contentType: 'application/json; charset=utf-8', url: 'UserActivityLogs.aspx/getList', success: function (data) { $scope.logslist = data $scope.$apply(); } }); } $scope.load(); } ]); WebMethod code: [System.Web.Services.WebMethod] [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)] public static List getList() { SqlConnection con = new SqlConnection(); con.ConnectionString = _connstr; con.Open(); var logs = new List(); string get = "select * from
Try to display the data of single column first.
- {{log.LogID}}
To make sure if you are really getting your data at javaScript level and to make sure if your $scope is really working fine first try this snippet in your html. If it works than try all columns. If it does not work than try this in your html and body tags and hopefully it would work....cheers