Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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;
            }
        }
);  
});
share|improve this question
    
Mixing jQuery and Angular is not recommened, especially for beginners. Have you read: stackoverflow.com/questions/14994391/… ? –  TheHippo Feb 27 at 10:21

1 Answer 1

up vote 0 down vote accepted

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);
            }
          );
        }
      }
    }
  );
});
share|improve this answer
    
That worked straight away Wawy The Great! Thanks a lot. Also, the TheHippo thanks. I really need to read the reference because my background is plain old Java Script and Server side Java. So, i tend to think of pure JS, not to talk of JQuery or the new AngularJS. Thanks, now I can go for a cupa! –  olatom Feb 27 at 10:59
    
Nice to see you trying this out, @olatom. Do also check out Spiro (github.com/NakedObjectsGroup/spiro) which already integrates RO and Angular, albeit using Typescript. But as you're a Java guy, I notice that IntelliJ 13 now has Typescript support. –  Dan Haywood Feb 28 at 9:54
    
Thanks Dan ... as ever! –  olatom Feb 28 at 11:43

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.