0

Solicito de su colaboración debido a que no sé como podría relacionar dos listas las cuales tiene en común el id de una de ellas

<table>
<thead>
    <tr>
        <th>Nombre</th>
        <th>Edad</th>
        <th>E-mail</th>
        <th>Ciudad</th>
    </tr>
</thead>
<tbody>
<tr ng-repeat=" usuario in usuarios track by $index">
    <td>{{usuario.nombre}}</td>
    <td>{{usuario.edad}}</td>
    <td>{{usuario.email}}</td>
    <td>{{usuario.ciudad}}</td> --> No se como obtener esto...?
</tr>       
</tbody>
</table>

Listas:

$scope.usuarios =[{
    "id": 1,
    "nombre": "Juan",
    "edad": 20,
    "email":"[email protected]",
    "idCiudad": 2 
}, {
    "id": 2,
    "nombre": "Pedro",
    "edad": 25,
    "email":"[email protected]",
    "idCiudad": 1
}];

$scope.ciudades = [{
    "id":1,
    "nombre": "Medellin"
}, {
    "id":2,
    "nombre": "Bogota"
}];

2 respuestas 2

1

Puedes recorrer el arreglo y generar uno nuevo con las dos informaciones mezcladas

angular.module('app', [])
  .controller('ListadoCtrl', function($scope) {
    $scope.usuarios = [{
      "id": 1,
      "nombre": "Juan",
      "edad": 20,
      "email": "[email protected]",
      "idCiudad": 2
    }, {
      "id": 2,
      "nombre": "Pedro",
      "edad": 25,
      "email": "[email protected]",
      "idCiudad": 1
    }];

    $scope.ciudades = [{
      "id": 1,
      "nombre": "Medellin"
    }, {
      "id": 2,
      "nombre": "Bogota"
    }];

    activate();

    function activate() {
      $scope.usuarios = $scope.usuarios.map(function(usuario) {
        for (var i = 0; i < $scope.ciudades.length; i++) {
          if (usuario.idCiudad === $scope.ciudades[i].id) {
            usuario.ciudad = $scope.ciudades[i];
            break;
          }
        }
        return usuario;
      });
    }

  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="app" ng-controller="ListadoCtrl">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Edad</th>
      <th>E-mail</th>
      <th>Ciudad</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat=" usuario in usuarios track by $index">
      <td>{{usuario.nombre}}</td>
      <td>{{usuario.edad}}</td>
      <td>{{usuario.email}}</td>
      <td>{{usuario.ciudad.nombre}}</td>
    </tr>
  </tbody>
</table>

O puedes usar filtros de angular

El filtro predefinido filter te puede tomar un arreglo y devolver las coincidencias que sigan determinado patrón. Puedes direccionar el resultado directamente o crear otro filtro que lo haga por ti para que quede más limpio.

angular.module('app', [])
  .controller('ListadoCtrl', function($scope) {
    $scope.usuarios = [{
      "id": 1,
      "nombre": "Juan",
      "edad": 20,
      "email": "[email protected]",
      "idCiudad": 2
    }, {
      "id": 2,
      "nombre": "Pedro",
      "edad": 25,
      "email": "[email protected]",
      "idCiudad": 1
    }];

    $scope.ciudades = [{
      "id": 1,
      "nombre": "Medellin"
    }, {
      "id": 2,
      "nombre": "Bogota"
    }];

  })
  .filter('ciudad', function() {
    return function(input) {
      return input ? input[0].nombre : null;
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ListadoCtrl">
  <h2>Con filtro customizado</h2>
  <table>
    <thead>
      <tr>
        <th>Nombre</th>
        <th>Edad</th>
        <th>E-mail</th>
        <th>Ciudad</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat=" usuario in usuarios track by $index">
        <td>{{usuario.nombre}}</td>
        <td>{{usuario.edad}}</td>
        <td>{{usuario.email}}</td>
        <!-- Usas el filtro para que te muestre solo el nombre -->
        <td>{{ciudades | filter : {id: usuario.idCiudad} | ciudad }}</td>
      </tr>
    </tbody>
  </table>
  <h2>Sin filtro customizado</h2>
  <table>
    <thead>
      <tr>
        <th>Nombre</th>
        <th>Edad</th>
        <th>E-mail</th>
        <th>Ciudad</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat=" usuario in usuarios track by $index">
        <td>{{usuario.nombre}}</td>
        <td>{{usuario.edad}}</td>
        <td>{{usuario.email}}</td>
        <!-- Invocas directamente el valor de la propiedad (el resultado es un arreglo) -->
        <td>{{(ciudades | filter : {id: usuario.idCiudad})[0].nombre }}</td>
      </tr>
    </tbody>
  </table>
</div>

1

Usa una funcion en tu controlador que converte idCiudad al nombre de la ciudad.

Por ejemplo:

HTML -

<div ng-controller="Ctrl">
  <table>
  <thead>
      <tr>
          <th>Nombre</th>
          <th>Edad</th>
          <th>E-mail</th>
          <th>Ciudad</th>
      </tr>
  </thead>
  <tbody>
  <tr ng-repeat="usuario in usuarios">
      <td>{{usuario.nombre}}</td>
      <td>{{usuario.edad}}</td>
      <td>{{usuario.email}}</td>
      <td>{{ciudadFunc(usuario.idCiudad)}}</td>
  </tr>       
  </tbody>
  </table>
</div>

JS -

var myApp = angular.module('myApp',[]);

function Ctrl($scope) {
    $scope.usuarios =[{
    "id": 1,
    "nombre": "Juan",
    "edad": 20,
    "email":"[email protected]",
    "idCiudad": 2 
    },
    {
    "id": 2,
    "nombre": "Pedro",
    "edad": 25,
    "email":"[email protected]",
    "idCiudad": 1
    }];

    $scope.ciudades = [{
    "id":1,
    "nombre": "Medellin"
    },
    {
    "id":2,
    "nombre": "Bogota"
    }];

    $scope.ciudadFunc = function ciudadFunc(idCiudad){
        for (var llave = 0; llave < $scope.ciudades.length; llave++){
        if ($scope.ciudades[llave].id == idCiudad){
          return $scope.ciudades[llave].nombre;
        } 
      }
    }
}

Fiddle.

2
  • si lo pense asi, epro queria saber si con angular existe alguna funcion o algo que me pueda hacer esa union, creo que es el unico camino..?
    – Gdaimon
    Commented el 7 sept. 2016 a las 17:52
  • Si, a mi, es el unico camino. No se de una function que hace esa union en Angular. Commented el 7 sept. 2016 a las 18:33

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.