1

hola tengo un archivo json corriendo en un servidor local con dos tablas clientes y bonos.el archivo json llamado clientes con llave primaria id lo tengo en una tabla. Estoy tratando que cuando le de click al id de la tabla clientes muestre en un pop-up los datos de ese cliente pero tomándolos de json bonos.

tengo algo asi

    <table class="table table-striped results" id="table1">
            <thead>
                <tr id="trstyle">
                    <th>N° Bono</th>
                    <th>Cédula</th>
                    <th>Cliente</th>
                    <th>Valor</th>
                    <th>Saldo</th>
                    <th>Fecha creación</th>
                    <th>Fecha vencimiento</th>
                    <th>Usuario</th>
                    <th>Estado</th>
                    <th>Motivo</th>
                    <th>Canal</th>
                </tr>
                <tr class="warning no-result">
                    <td colspan="4"><i class="fa fa-warning"></i> No result</td>
                </tr>
            </thead>
            <tbody>
                <tr id="trstyle" ng-repeat="x in todos">
                    <td id="thbono"><a ng-click="cargar(x)" ng-href={{"#pop1"}} id="open">{{x.id}}</a></td>
                    <td>{{x.cedula}}</td>
                    <td>{{x.cliente}}</td>
                    <td>{{x.valor}}</td>
                    <td>{{x.saldo}}</td>
                    <td>{{x.fechaCreacion}}</td>
                    <td>{{x.fechaVence}}</td>
                    <td>{{x.usuario}}</td>
                    <td>{{x.estado}}</td>
                    <td>{{x.motivo}}</td>
                    <td>{{x.canal}}</td>
                </tr>
            </tbody>
        </table>
        <ul id="#links"></ul>
        <div id="pop1" class="pop-up" ng-controller="TodoCtrl2">
            <div class="popBox">
                <div class="popScroll">
                    <table class="table table-bordered results" id="table1">
                        <thead>
                            <tr id="trstyle"> 
                                <th>Fecha</th>
                                <th>Número</th>
                                <th>Cédula</th>
                                <th>Cliente</th>
                                <th>Valor</th>
                                <th>Documento</th>
                                <th>Canal</th>
                                <th>Mensaje</th>
                                <th>Usuario</th>
                            </tr>
                        </thead>
                        <tbody>         
                            <tr id="trstyleque" ng-repeat="y in bonos">
                                <td>{{y.creationdate}}</td>
                                <td>{{y.id}}</td>
                                <td>{{y.document}}</td>
                                <td>{{y.client}}</td>               
                                <td>{{y.valor}}</td>
                                <td>{{y.canal}}</td>
                                <td>{{y.canal}}</td>
                                <td>{{y.motivo}}</td>
                                <td>{{y.usuario}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

en el js tengo algo asi.

//Consulta un archivo json para llenar la tabla
var App = angular.module('App', []);

App.controller('TodoCtrl', function($scope, $http) {
 $http.get('http://localhost:3000/clientes/')
 .then(function(res){
  $scope.todos = res.data;                
});

});


//Consulta un archivo json para llenar el pop-up
App.controller('TodoCtrl2', function($scope, $http) {
 $scope.bonos=[];
 $http.get('http://localhost:3000/detalle_Bonos/')
 .then(function(res){
  $scope.bonos = res.data;                
});

$scope.cargar = function(bono){
  console.log(bono);
  $scope.bonos[0] = bono;
}
});

muchas gracias

2 respuestas 2

1

guau, faltan algunos datos como por ejemplo la estructura de tu json y lo más importante es en que se relaciona el primer json del segundo, me imagino que quieres cargar datos según el primer json, entonces deberías hacer un recorrido al segundo array y compararlo con el id que obtienes al hacer clic en clientes.

 <pre><td id="thbono"><a ng-click="cargar(x)" ng-href={{"#pop1"}} id="open">{{x.id}}</a></td></pre>

la funciona cargar deberia ser algo así:

<td id="thbono"><a ng-click="cargar(x.id)" ng-href={{"#pop1"}} id="open">{{x.id}}</a></td>

luego para obtener la información y que cargue en el modal o popup es:

   $scope.bono_detalle = [];   
   $scope.cargar = function(id_cliente){
      console.log(bono);
      for(i=0;i<$scope.bonos.length ; i++){
        if($scope.bonos[i].idCliente == id_cliente){
          $scope.bono_detalle.push($scope.bonos[i]);
        }
      } 
    }

por último en la parte donde quieres mostrar el bono, simplemente pondrías esto:

<tr id="trstyleque" ng-repeat="y in bono_detalle">
   <td>{{y.creationdate}}</td>
   <td>{{y.id}}</td>
   <td>{{y.document}}</td>
   <td>{{y.client}}</td>               
   <td>{{y.valor}}</td>
   <td>{{y.canal}}</td>
   <td>{{y.canal}}</td>
   <td>{{y.motivo}}</td>
   <td>{{y.usuario}}</td>
 </tr>

y listo, así mostramos el detalle a la persona, sería mucho mejor si mostraras una pedazo de tu json y pulir mas tu idea, saludos.

2
  • 1
    muchas gracias funciono muchas. Commented el 19 sept. 2017 a las 2:47
  • Excelente amigo me alegro mucho
    – Brayan LP
    Commented el 20 sept. 2017 a las 2:25
1

{ "clientes": [ { "id": 12131409080, "cedula": "1040", "cliente": "Jhon Smith", "valor": "300000", "saldo": " 100000", "fechaCreacion": "01/09/2016", "fechaVence": "01/09/2016", "usuario": "Angela2", "estado": "activo", "motivo": "El sujeto compro 3 Tennis 2017 con tarjeta de miembro", "canal": "aplicacion1" } ], "detalle_Bonos": [ { "id": 12131409080, "jwttoken": "HER48", "code": "1234", "amount": "1234", "creationdate": "01/09/2016", "expirationdate": "01/09/2016", "canal": "1", "status": "activo", "motive": "compro", "document": "1040", "msg": "mensage 1", "client": "Jhon Smith" } ] }

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.