Angularjs - Combining data from multiple $http calls in a for loop

Question

I am having problems combining the data from multiple $http call and displaying a list in an HTML table. There is a first $http call, which returns a set of URLS. Then, I iterate through the URL list and make multiple $http calls in the loop. Each inner http call returns a table row. So, I need to compose the rows for all the $http calls and generate a table in the view. I got the solution working using Ajax call and jQuery. But, the Angular code below retrieves the data for the inner row $http call, but I was not able to combine the data from all the $http call into a single list and display in a view using say, ng:repeat.

I tried concatenating the row html, but the concatenated string is lost outside the for loop.

Please, what is the most appropriate way of doing this for a real application. I tried $scope.rowList.push(row), but it erred : "Uncaught TypeError: Cannot call method 'push' of undefined". Even after defining the scope variable in the for loop and just after the controller defintion.

HTML:

<table>
    <tbody ng:repeat="row in rowList">
    </tbody>
</table>

JavaScript:

sampleApp.controller('TableRowController', function($scope, $http) {

    $scope.rowList= '';

    $http({ method:'GET',
            url: 'http://localhost:8080/xxx-webapp-1.0-SNAPSHOT/restful/services/RowList/actions/listAll/invoke',
            headers: {'Accept': 'application/json'}
    }).
        success(
            function (data) {
                var resultType = data.resulttype;
                var objects = data.result.value;
                console.log(objects);

                if(resultType == "list"){

                    var html='';

                    for(i=0; i < objects.length; i++){

                        //Restful call                  
                        $http({ method:'GET',url: objects[i].href,headers: {'Accept': 'application/json'}
                              }).
                        success(
                            function (rowdata) {


                                var row= '<tr><td width="70%">'+ rowdata.members.xxxDescription.value +
                                 '</td><td  align ="center" width="30%">'+ 
                                 rowdata.members.xxxprice.value +'</td></tr>';

                                html+=row;

                                //$scope.rowList.push(row);
                            }
                );                      
               }
                    alert('INNER HTML = '+html);
                    $scope.rowList=html;
            }
        }
);  
});

Answer 1

As someone mentioned don't mix jquery and Angularjs. You rarely need to use jquery with angularjs.

HTML:

<table>
  <tbody>
    <tr ng-repeat="row in rowList">
        <td width="70%">{{row.members.xxxDescription.value}}</td>
        <td align ="center" width="30%">{{row.members.xxxprice.value}</td>
    </tr>
  </tbody>
</table>

JS:

sampleApp.controller('TableRowController', function($scope, $http) {

  $http({ method:'GET',
    url: 'http://localhost:8080/xxx-webapp-1.0-SNAPSHOT/restful/services/RowList/actions/listAll/invoke',
    headers: {'Accept': 'application/json'}
  }).
    success(
    function (data) {
      var resultType = data.resulttype;
      var objects = data.result.value;
      $scope.rowList= [];
      console.log(objects);

      if(resultType == "list"){
        for(i=0; i < objects.length; i++){
          //Restful call
          $http({ method:'GET',url: objects[i].href,headers: {'Accept': 'application/json'}
          }).
            success(
            function (rowdata) {
              $scope.rowList.push(rowdata);
            }
          );
        }
      }
    }
  );
});