2

tengo dos tablas las cuales estan realcionadas por un IdEntidad la cual quiero mostrarlo agrupado EN UNA TABLA

Eh estado haciendo de esta manera:

var app = angular.module("RodoApp", []);
app.controller("RodoController", function ($scope, $http) {

    $http.get('/Usuario/GetEntidad').then(function (response) {
        $scope.EntidadList = response.data;
    });

    $http.get('/Usuario/GetUnindad').then(function (response) {
        $scope.UnidadList = response.data;
    });
});

tengo dos tablas

ENTIDAD

introducir la descripción de la imagen aquí

UNIDAD

introducir la descripción de la imagen aquí

las cuales quiero mostrar de esta manera dentro una tabla

introducir la descripción de la imagen aquí

2
  • Tu pregunta no esta clara. Quieres mostrar los resultados en un select o en una tabla?
    – Einer
    Commented el 19 ene. 2019 a las 23:38
  • @Einer quiero mostrar todo esto en una tabla Commented el 19 ene. 2019 a las 23:50

1 respuesta 1

1

Lo que puedes hacer es crear una variable nueva llamada $scope.newItems = [ ]; donde vas almacenar los nuevos items que vas a filtrar y hacer uso del método filter() como puedes observar continuación, quedo atento ante cualquier inquietud.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {

    $scope.newItems = [];

    $scope.EntidadList  = [
      {
        "idEntidad": 1,
        "Nombre": "Ecuador"
      },
      {
        "idEntidad": 2,
        "Nombre": "Bolivia"
      },
      {
        "idEntidad": 3,
        "Nombre": "Peru"
      }
    ];

    $scope.UnidadList = [
      {
        "idUnidad": 1,
        "idIdentidad": 1,
        "Nombre": "Quito"
      },
      {
        "idUnidad": 2,
        "idIdentidad": 1,
        "Nombre": "Guayaquil"
      },
      {
        "idUnidad": 3,
        "idIdentidad": 2,
        "Nombre": "Cochabamba"
      },
      {
        "idUnidad": 4,
        "idIdentidad": 2,
        "Nombre": "La paz"
      },
      {
        "idUnidad": 5,
        "idIdentidad": 3,
        "Nombre": "Cusco"
      }
    ];

    $scope.mostrarItems= function() {
        for (var i = 0; i < $scope.EntidadList.length; i++) {
            $scope.UnidadList.filter( (o) => { 
                if (o.idIdentidad == $scope.EntidadList[i].idEntidad) {
                    o.Pais = $scope.EntidadList[i].Nombre;
                    $scope.newItems.push(o);
                }
            });
        }
    }    
});


  
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body ng-app="myApp" ng-controller="myCtrl">

    <div class="container">
        <table class="table" ng-init="mostrarItems()">
            <thead>
                <tr>
                    <th scope="col">Pais</th>
                    <th scope="col">Nombre</th>
                    <th scope="col">Id Identitad</th>
                    <th scope="col">Id Unidad</th>
                </tr>
            </thead>
          <tbody>
            <tr ng-repeat="item in newItems">
                <td scope="row" ng-bind="item.Pais"></td>
                <td ng-bind="item.Nombre"></td>
                <td ng-bind="item.idIdentidad"></td>
                <td ng-bind="item.idUnidad"></td>
            </tr>
          </tbody>
        </table>
    </div>
</body>
</html>

Otra solución posible seria de la siguiente manera como tu quieres agrupar las ciudades dependiendo del país:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {

    $scope.newArr = [];

    $scope.EntidadList  = [
      {
        "idEntidad": 1,
        "Nombre": "Ecuador"
      },
      {
        "idEntidad": 2,
        "Nombre": "Bolivia"
      },
      {
        "idEntidad": 3,
        "Nombre": "Peru"
      }
    ];

    $scope.UnidadList = [
      {
        "idUnidad": 1,
        "idIdentidad": 1,
        "Nombre": "Quito"
      },
      {
        "idUnidad": 2,
        "idIdentidad": 1,
        "Nombre": "Guayaquil"
      },
      {
        "idUnidad": 3,
        "idIdentidad": 2,
        "Nombre": "Cochabamba"
      },
      {
        "idUnidad": 4,
        "idIdentidad": 2,
        "Nombre": "La paz"
      },
      {
        "idUnidad": 5,
        "idIdentidad": 3,
        "Nombre": "Cusco"
      }

    ];

    $scope.newArrayItem = function() {
        for (var i = 0; i < $scope.EntidadList.length; i++) {
            var filterCiudades = $scope.UnidadList.filter(function(o) {
                return o.idIdentidad == $scope.EntidadList[i].idEntidad;
            });
            $scope.EntidadList[i].ciudades = filterCiudades;
        }
        $scope.newArr = $scope.EntidadList;
    }    
});
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body ng-app="myApp" ng-controller="myCtrl">

    <div class="container">
        <table class="table" ng-init="newArrayItem()">
            <thead>
                <tr>
                    <th scope="col">Pais</th>
                    <th scope="col">Ciudades del Pais</th>
                </tr>
            </thead>
          <tbody>
            <tr ng-repeat="item in newArr">
                <td scope="row" ng-bind="item.Nombre"></td>
                <td ng-repeat="ciudad in item.ciudades" ng-bind="ciudad.Nombre"></td>
            </tr>
          </tbody>
        </table>
    </div>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.