You need help to understand my error / display data on the page.
Almost every question on the forum went through saying "ng-repeat not working". But still unable to find the answer.
(Note: the first time I tried to get data by creating a factory service using $ http)
Please take a look at my JavaScript code below (module, controller, and factory defined in one place)
//App declaration var myApp = angular.module("appLeadsLogRpt", []); //Controller declaration myApp.controller('controllerLeadsLogRpt', ['dataService', fncontrollerLeadsLogRpt]); function fncontrollerLeadsLogRpt(dataService) { var vm = this; //Table headers vm.TableHeaders = ["Lead Id", "Source", "Create Date", "Status", "Contact Id", "Customer Name", "AssignedTo", "Mail Content", "Closed Reason", "Last Lead Note"]; dataService.getAllData() .then(getData,null) .catch(showError); function getData(data) { vm.LeadsLogRptData = JSON.parse(data); //console.log(JSON.parse(data)); } function showError(errMsg) { console.log(errMsg); } } //Factory Service to fetch data myApp.factory('dataService', ['$http', DataService]); function DataService($http) { return { getAllData: GetAllData }; function GetAllData() { return $http({ method: 'get', url: 'DataHandler.ashx?method=leadsReport&listId=504473' }) .then(sendResponseData) .catch(sendError) } function sendResponseData(response) { return response.data; } function sendError(response) { return response.status; } } </script>
And my HTML as below:
<div id="DvContent" style="width:100%" data-ng-app="appLeadsLogRpt"> <div style="width:100%;" data-ng-controller="controllerLeadsLogRpt as vm1"> <input type="text" id="txtJsonData" value='<%=jsonLeadsLogRpt %>' style="display:none" /> <div><h3>Leads Log Report</h3></div> <div style="text-align:right;margin-bottom:2px;padding-right:2px;"> <a href="javascript:void(0);" data-ng-click="ExportToExcel();"><img src="/mp_images/excelicon.gif" border=0 width=22 height=22 alt="Open in Excel"></a> </div> <div id="divExportToExcel"> <table style="width:100%" id="tblLeadLogRpt" class="table table-bordered"> <thead> <tr style="background-color:#CCCCCC"> <th data-ng-repeat="item in vm1.TableHeaders" class="ng-cloack">{{item}}</th> </tr> </thead> <tbody> <tr data-ng-repeat="item1 in vm1.LeadsLogRptData"> <td class="ng-cloack">{{item1.A_LeadId}}</td> <td class="ng-cloack">{{item1.B_Source}}</td> <td colspan="8"></td> </tr> <tr data-ng-if="LeadsLogRptData.length==0"><td colspan="10">Data Not Found</td></tr> </tbody> </table> </div> </div> </div>
If I assign the hard-coded data returned by the server to ng-repeat, it works fine
Please let me know what I am doing wrong.
One more question.
In factory, I retrieve the data by calling the get $ http method
If I want to call it with the Post method, how do I pass parameters?
In jQuery, I do it as follows.
$.ajax({ url: 'AbcdHandler.ashx', type: 'POST', data: { 'method': 'ABCData', 'StartDate': startDate, 'EndDate': endDate }, success: function (result) { return JSON.parse(result); }, error: OnError });
Thanks in advance for reading and help.
My last observation:
when I write data on the console, got it. (take a look at the getData (data) function)
[{"A_LeadId": "426429", "B_Source": "LabX"}, {"A_LeadId": "429369", "B_Source": "LabX"}, {"A_LeadId": "430586", "B_Source": "Info"}, {"A_LeadId": "430589", "B_Source": "Info"}, {"A_LeadId": "433848", "B_Source": "LabX"}, {"A_LeadId": "448592", "B_Source": "Information"}, {"A_LeadId": "451795", "B_Source": "Bid"}, {"A_LeadId": "453008", "B_Source": "Low Rate"}, {"A_LeadId" : "453009", "B_Source": "Low rate"}, {"A_LeadId": "453010", "B_Source": "Low rate"}, {"A_LeadId": "455736", "B_Source": "Info" }, {"A_LeadId": "455743", "B_Source": "Info"}, {"A_LeadId": "457030", "B_Source": "Info"}, {"A_LeadId": "457052", "B_Source" : "LabX"}, {"A_LeadId": "461503", "B_Source": "Manually entered"}]
If I copy this and directly assign vm.LeadsLogRptData, the system shows me the output on the screen correctly. for example vm.LeadsLogRptData = [{"A_LeadId": "426429", "B_Source": "LabX"}, ......];
One more thing. When I check the data length, it shows me 621. ({{vm.LeadsLogRptData.length}})
In fact, there are only 15 curly braces of the pair ({}), and the system should show me the length as 15
Hope I explain / describe my problem correctly.
(You need something that correctly converts my data in Json format)
Thanks,
I got an answer
Just use eval with Json.parse and the system will start displaying the data correctly for example vm.LeadsLogRptData = eval (JSON.parse (data));
Can someone please explain to me the logic of this?
Thanks to everyone who read and answered so far.