Question

Need help to understand my mistake/ to display data on page.

I gone through almost every question on forum saying "ng-repeat not working". But still not able to find out the answer.

(Please note: First time I tried to fetch data by creating factory service with $http)

Please take a look at my below JavaScript code (Module, Controller and factory defined at 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 like 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 hard coded data return by server to ng-repeat it works fine

Please let me know what I am doing wrong.

One more question.

In factory I fetch data by calling get method of $http

If I want to call it by Post method, how do I pass params?

In Jquery, I doing it following way.

    $.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 helping.

My latest observation:

when I write data on console, got this. (take a look on function getData(data))

[{"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":"Info"},{"A_LeadId":"451795","B_Source":"Bid"},{"A_LeadId":"453008","B_Source":"Low Bid"},{"A_LeadId":"453009","B_Source":"Low Bid"},{"A_LeadId":"453010","B_Source":"Low Bid"},{"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 to vm.LeadsLogRptData, system shows me output on screen properly. e.g. vm.LeadsLogRptData = [{"A_LeadId":"426429","B_Source":"LabX"},......];

One more thing. When I check length of data, it shows me 621. ({{vm.LeadsLogRptData.length}})

Actually there are only 15 curly brackets pair ({}) and system should show me length as 15

Hope I explain/describe my issue correctly.

(Need something which converts my data properly in Json format)

Thanks,

I got answer

Just use eval with Json.parse and system start displaying data properly e.g. vm.LeadsLogRptData = eval(JSON.parse(data));

Anyone please explain me the logic behind this?

Thanks to every one who read and replied so far.

Answer 1

Maybe you should use params property of $http object, like:

function GetAllData() {                
            return $http({
                method: 'GET',
                url: 'http://localhost:12345/DataHandler.ashx',
                params: {method: "leadsReport", listId: 504473}
            })
            .then(sendResponseData)
            .catch(sendError)
        }

If you want to perform POST request, you should use it like this:

function PostData() {                
            return $http({
                method: 'POST',
                url: 'http://localhost:12345/DataHandler.ashx',
                data: {exampleData: exampleData}
            })
            .then(sendResponseData)
            .catch(sendError)
        }

Remember to change http://localhost:12345/ for your server URL.

ng-repeat not displaying data when fetch via factory service

1 个答案: