Relate two lists in angularjs

Question

Relate two lists in angularjs

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I request your collaboration because I do not know how I could relate two lists which have in common the id of one of them

<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>

Lists:

$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"
}];

javascript html json angularjs

asked by Gdaimon 07.09.2016 в 06:29

source

2 answers

1

Use a function on your controller that converts idCiudad to the name of the city.

For example:

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 .

answered by 07.09.2016 в 17:50

UIButton custom class Save parameters of a method in a variable

score 1 · Accepted Answer

You can go through the arrangement and generate a new one with the two mixed information

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>

Or you can use angle filters

The predefined filter filter can take an arrangement and return matches that follow a certain pattern . You can direct the result directly or create another filter that does it for you to make it cleaner.

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>