CODEWITHSUNDEEP
angularjsangular-ui-grid
Code Grasshopper
Code Grasshopper

Reputation: 620

How to extract specific data from array to display on ui-grid

I am trying to correct the following ui-grid:

enter image description here

To display just the information I want from object alquiler and object usuario, both of these are contained within a Rent (UsuarioHasAlquiler) object.

I tried the following:

'use strict';

angular.module('myApp.view1', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    templateUrl: 'resources/view1/view1.html',
    controller: 'View1Ctrl'
  });
}])

.controller('View1Ctrl', ['$scope','$http',function($scope,$http) {
    $scope.rents = [];


$scope.requestObject = {"pageNumber": 0,"pageSize": 0,"direction": "","sortBy": [""],"searchColumn": "string","searchTerm": "","userRent": {}};
    $http.post('rest/protected/userRent/getAll',$scope.requestObject).success(function(response) {
        console.log("response",response)
        $scope.rents = response.usuarRent;
        console.log("$scope.items",$scope.rents[1])
    //  console.log("Tipo de usuario:", $scope.usuarios.tipos)
    });


$scope.gridOptions = { data: rents, 
                       columnDefs: [{ field: 'idUsuarioHasAlquiler', displayName: 'ID'},
                                    { field: 'usuario.firstname', displayName: 'First Name'},
                                    { field: 'alquiler.name', displayName: 'Item Name'},
                                    { field: 'estado_renta', displayName: 'Returned'}]
  };  

}]);

And while the request is succesful I am not able to extract just what I want from the objects to display on the grid.

<div class="container">
    <div class="container">
        <h3 class="text-center">Rents</h3>
        <hr>
    </div>


    <div class="container">
        <div class="row">
             <div ui-grid="gridOptions" class="myGrid"></div>
             <br>
             <button type="button" ng-click="" class="btn btn-primary">Add</button> 
             <button type="button" ng-click="" class="btn btn-success">Edit</button>  
             <button type="button" ng-click="" class="btn btn-danger">Delete</button>
        </div>
    </div>
</div>

I was hoping someone could point me in the right direction. Thanks and sorry for the spanish.

Upvotes: 0

Views: 1038

Answers (1)

Bennett Adams
Bennett Adams

Reputation: 1818

I created a plunker based on your data, and it's working fine. The only difference between your version and the working version, as far as I can tell, is that you have set $scope.gridOptions.data to rents, rather than to $scope.rents.

The only way I can recreate your issue is to set ui-grid="{data:rents}" in your html, which doesn't apply your column definitions to the grid. Did you by chance copy data:rents out of the ui-grid attribute and paste it into your $scope.gridOptions object? In this case, nothing at all should show up because rents is undefined.

Upvotes: 1

Related Questions