why does the data couldn't show in the viewpage?

Question

this is the html code:

<li ng-repeat="data in spreadGroupData" ng-click="channelList(data.campaigns,data.name)"><a href="javascript:void(0)">{{data.name}}</a></li>`

this is the code i write in the services.js:

services.getChannelName = function($scope,channelidList){
        httpurl = "api/account/"+nowuID+"/channel/channellist?id=" + channelidList;
        $http.get(httpurl).success(function(data){
            if(data.length>0){
                $scope.spreadGroupData = [];
                for(var i in data){
                    var group = {};
                    group.campaigns = data[i].id;
                    group.name = data[i].name;
                    $scope.spreadGroupData.push(group);
                }
            }
        });
    };

there are data in $scope.spreadGroupData,why couldn't show in the view page?

Now I know I shouldn't use $scope in the service,but the param 'channelidList' I get it from another service method. How to rewrite this all?

services.getListData = function(scope,flag){
         var reportList = "quality_report",merger = true;
         if(typeof flag!='undefined' && flag == 1){
             reportList = "fakequality_report";
             merger = false;
         }
        var cids = scope.spreadUrls,dateArr=scope.date.split(" - "),startDate = "",endDate = "",channelids = "";
        if(dateArr.length==1){
            startDate = endDate = dateArr[0];
        }else{
            startDate = dateArr[0];
            endDate = dateArr[1];
        }
        if(cids!=null){
            if(cids!='All'){
                channelids = "&channelid="+cids.join(",");
            }
            if(scope.selecteds != -1 &&  typeof(scope.selecteds) != "undefined"){
                httpurl = "api/app/"+scope.selecteds+"/report/"+reportList+"?startdate="+startDate+"&enddate="+endDate+channelids;
                $http.get(httpurl).success(function(data,status){
                    scope.tabTitle = data.name;
                     var tableList = services.colToRow(data.val),cidlen = cids.length;
                     scope.tabTotal = services.dataToTotal(data.val,cidlen);
                     var key = data.key,tabname = [],zero = [],tabListInfo = [],allnames = scope.spreadNames;
                     for(var i=0;i<scope.tabTotal.length;i++){
                        zero[i] = 0;
                     }
                     for(i=0;i<cidlen;i++){
                        var idx = $.inArray(allnames[i],key);
                        tabListInfo[i] = new Array();
                        if(idx>-1){
                            tabListInfo[i] = tableList[idx];
                        }else{
                            tabListInfo[i] = zero;
                        }

                        if(merger){
                            var temp = [];
                            for(var j=0;j<tabListInfo[i].length;j++){
                                temp[j] = tabListInfo[i][j];
                            }
                            temp.unshift(scope.spreadNames[i]);
                            tabListInfo[i] = temp;
                        }
                     }
                     var channelIdList = [];
                     if(key.length>0){
                         var n = 0;
                         for(var i in scope.spreadData){
                             for(var j in key){
                                 if(key[j] == scope.spreadData[i].name){
                                     n++;
                                     channelIdList.push(scope.spreadData[i].channel);
                                     if(n>20) break;
                                 }
                             }
                         }
                     }
                     services.getChannelName(scope,channelIdList.join(","));
                     scope.tabname = scope.spreadNames;
                     if(merger){
                         var tabListObj = [];
                         if(reportList == "quality_report"){
                             for(var i = 0; i <tabListInfo.length; i++){
                                 tabListObj.push({
                                     "name" : tabListInfo[i][0],
                                     "hitNum" : tabListInfo[i][1],
                                     "reSchedulNum" : tabListInfo[i][2],
                                     "activeDevice" : tabListInfo[i][3],
                                     "activeRate" : tabListInfo[i][4],
                                     "payment" : tabListInfo[i][5],
                                     "spdID" : cids[i]
                                 });
                             }
                         }
                         scope.tabListInfo = tabListObj;
                     }else{
                         if(reportList == "fakequality_report"){
                             var tabListObj = [];
                             for(var i = 0; i <tabListInfo.length; i++){
                                 tabListObj.push({
                                     "name" : scope.tabname[i],
                                     "reSchedulNum" : tabListInfo[i][0],
                                     "hitNum" : tabListInfo[i][1],
                                     "errHitNum" : tabListInfo[i][2],
                                     "errHitRate" : tabListInfo[i][3],
                                     "activeDevice" : tabListInfo[i][4],
                                     "errActDevice" : tabListInfo[i][5],
                                     "errActRate" : tabListInfo[i][6],
                                     "spdID" : cids[i]
                                 });
                             }
                             scope.tabListInfo = tabListObj;
                         }else{
                             scope.tabListInfo = tabListInfo;
                         }
                     }
                     scope.spreadIDs = cids;
                }).error(function(data){
                    services.loginTimeout(data);
                });
                }
            }
    };

Answer 1

You should never pass $scope object to service, service should always have a reusable method which will exposed. I'd suggest you service method should return promise to the controller caller method, and caller method will implement the binding logic inside controller promise success method.

Service Method

services.getChannelName = function(channelidList) {
    httpurl = "api/account/" + nowuID + "/channel/channellist?id=" + channelidList;
    return $http.get(httpurl).success(function(data) {
        return data;
    }).error(function(err) {
        return err;
    });
};

Controller Method

$scope.getChannelName = function() {
    $scope.spreadGroupData = [];
    service.getChannelName(channelidList).then(function(data) {
        if (data.length > 0) {
            for (var i in data) {
                var group = {};
                group.campaigns = data[i].id;
                group.name = data[i].name;
                $scope.spreadGroupData.push(group);
            }
        }
    }, function(err) {
        console.log("Error" + err);
    })
}

Update

Whole idea about the code like below. Need to maintain proper code stack resolve. First service method will return promise, on resolved of it you need to do change in some scope variables, then you will call second service method which has promise, on resolved of it you need to update scope.

Code

services.getListData(flag).then(function(data) { //you may need to pass multiple parameter to this
    //then do scope operation
    service.getChannelName(channelidList).then(function(res) {
        if (res.length > 0) {
            for (var i in data) {
                var group = {};
                group.campaigns = data[i].id;
                group.name = data[i].name;
                $scope.spreadGroupData.push(group);
            }
        }
    }, function(err) {
        console.log("Error" + err);
    });
})

Answer 2

I only saw one little thing that might be cause a problem, there is a missing var keyword in front of the httpurl variable and I only add that to below demo.

The view you need to show your data:

<body ng-controller="myController">
    Spread Group Data
    <br />
    ------------------------------------------------------------
    <li ng-repeat="data in spreadGroupData"
        ng-click="channelList(data.campaigns,data.name)">
        <a href="javascript:void(0)">{{data.name}}</a>
    </li>
</body>

I used a mock json provide to simulate your service and call it in a controller directly:

// Prepared a mock json array on the http://beta.json-generator.com and below url returns:
// [{"name":"Item 1","id":1},{"name":"Item 2","id":2},{"name":"Item 3","id":3},{"name":"Item 4","id":4}]
var httpurl = "http://beta.json-generator.com/api/json/get/LoUmNC4";

$http.get(httpurl).success(function(data) {
  if (data.length > 0) {
    $scope.spreadGroupData = [];
    for (var i in data) {
      var group = {};
      group.campaigns = data[i].id;
      group.name = data[i].name;
      $scope.spreadGroupData.push(group);
    }
  }
});

If your service is independent from your controller, then you can pass $scope to your service method. But in this demo I implemented the http call block directly in a main controller. Besides this as @pankajparkar's said do not use the $scope in factories or service unrelated services and take and use response data from that like services. Please check promise and $q in order to handle asynchronous calls.

This is a working demo: Demo

Answer 3

Place $scope.spreadGroupData = []; outside $http call :-

services.getChannelName = function($scope,channelidList){
        httpurl = "api/account/"+nowuID+"/channel/channellist?id=" + channelidList;
        $scope.spreadGroupData = [];
        $http.get(httpurl).success(function(data){
            if(data.length>0){
                for(var i in data){
                    var group = {};
                    group.campaigns = data[i].id;
                    group.name = data[i].name;
                    $scope.spreadGroupData.push(group);
                }
            }
        });
    };