AngularJS, consuming a Rest Service which response with a Array<Object> . How to show this in a Table?

Question

how can I put this Rest Json Response:

[
      {
      "Attribute1": 1,
      "Attribute2": "1",
      "Attribute3": "example",
      "Attribute4": "12345",
      "Attribute5": "example example",
      "Attribute6: "20/10/2015",
      "Attribute7": "2015-11-13"
   },
           {
      "Attribute1": 7,
      "Attribute2": "5",
      "Attribute3": "example",
      "Attribute4": "12345",
      "Attribute5": "example example",
      "Attribute6: "20/10/2015",
      "Attribute7": "2015-11-13"
   },
         {
      "Attribute1": 2,
      "Attribute2": "3",
      "Attribute3": "example",
      "Attribute4": "12345",
      "Attribute5": "example example",
      "Attribute6: "20/10/2015",
      "Attribute7": "2015-11-13"
   }
]

which i get by calling a http.get in this function in angularjscustom.js:

$scope.getCalls = function() {  
        $scope.ObjectList = [$http.get("http://localhost:8080/test/test2/test4?uname=" + scope.uname + "&passwort=" +scope.password)];

to a table in this index.html file :

<table class="table table-hover table-striped">
    <thead>
        <tr>
            <th> Attribut1 </th>
            <th> Attribut2 </th>
            <th> Attribut3 </th>
            <th> Attribut4 </th>
            <th> Attribut5 </th>
            <th> Attribut6 </th>
        </tr>
    </thead>
    <tbody>

    <tr data-ng-repeat="Object in ObjectList">
                            <td>{{ Object.Attribut1}}</td>
                            <td>{{ Object.Attribut2 }}</td>
                            <td>{{ Object.Attribut3 }}</td>
                            <td>{{ Object.Attribut4 }}</td>
                            <td>{{ Object.Attribut5 }}</td>
                            <td>{{ Object.Attribut6 }}</td>
                            <td>{{ Object.Attribut7 }}</td>
                        </tr>
                    </tbody>
                </table>

Also i want to make it possible to click on a checkbox to get a reference to Attribut 1 for example.. I cant figure out how to do this. Maybe someone can direct me in the right way? I have no AngularJs or Javascript experience.

devmarkpro · Accepted Answer · 2015-11-15 18:27:10Z

you module and controller.

 var app = angular.module("example",[]);
 app.controller("sampleController","$scope","$http",
    function($scope,$http){
       $http.get("/api/some/getList")
         .success(function(data){
              //data properties: firstName , lastName

              //add is check property for checkbox
              angular.forEach(data,function(item){
                 item.isCheck = false;
              });
              $scope.items = data;
          })
         .error(function(exp){
              alert(exp);
          });
          $scope.selectedItems = [];
          $scope.checkChange = function(item){
               item.isCheck = !item.isCheck;                   
          }
          $scope.getSelected = function(){
             var selectedItems = [];
             angular.forEach($scope.items,function(item){
                  if(item.isCheck){
                     selectedItems.push(item);
                  }
             });
             //you have checked items in selectedItems variable.
          }
    }]);

html page:

     <table>
         <thead>
             <tr>
               <th></th>
               <th>First Name</th>
               <th>Last Name</th>
             </tr>
         </thead>
         <tbody>
             <tr ng-repeat="item in items track by $index">
                <td> 
                   <input type="checkbox" ng-model="item.isCheck" ng-change="checkChange(item)"/>
                </td>
                <td ng-bind="item.firstName"></td>
                <td ng-bind="item.lastName"></td>
             </tr>
         </tbody>
     </table>

Collectives™ on Stack Overflow

AngularJS, consuming a Rest Service which response with a Array<Object> . How to show this in a Table?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related