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

Question

I am trying to correct the following ui-grid:

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.

Bennett Adams · Accepted Answer · 2016-02-14 18:40:03Z

1

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.

answered Feb 14, 2016 at 18:40

Bennett Adams

1,81815 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Code Grasshopper Over a year ago

Yeah, i totally forgot about adding the $scope. thanks lot.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related