Issues parsing a nested JSON with AngularJS

Question

I have the following contoller in my app :

angular.module('myApp.controllers', []).
  controller('ClientesController', [ '$scope', '$rootScope', 'Clientes',
     function($scope, $rootScope, Clientes) {
        $rootScope.clientes;

        Clientes.query(function(response) {
          $rootScope.clientes = response;
  })
}]);

Which returns a JSON object with the following format :

 [{"idCliente":1,
   "nomeFantasia":"Flores",
   "razaoSocial":"Transportes Flores Ltda.",
   "contatosClientes": 
   [  
      {"idContatoCliente":1,
       "dddCelular":21,
       "email":"[email protected]"},
      {"idContatoCliente":2,
       "dddCelular":21,
       "email":"[email protected]"}
   ]
  }]

And a template which tries to parse the JSON with ng-repeat :

<tr ng-repeat="cliente in clientes | filter:searchText">
  <td>{{cliente.idCliente}}</td>
  <td>{{cliente.razaoSocial}}</td>
  <td>{{cliente.nomeFantasia}}</td>
  <td>{{cliente.contatosClientes.email}}</td>
  <td>
     <div class="right floated ui green icon buttons">
        <div class="ui button">Editar</i></div>
     </div>
  </td>
</tr>

The problem is that I can access the outer keys (idCliente,razaoSocial, etc) with the object.key sintaxe, but I can't access the inner keys (contatosClientes.email, for example) in the nested array.

I've tried many approaches and I am starting to think that is something wrong with my REST API, but before change all my backend code I would like to know if someone can help me with this issue.

Best regards, Antonio Belloni

contatosClientes is an array, you'll have to do ng-repeat for that too — Ori Price
– Ori Price, Commented Jul 6, 2015 at 19:10

Ori Price · Accepted Answer · 2015-07-06 19:12:23Z

5

contatosClientes is an array, you'll have to do ng-repeat for that too, for example:

<tr ng-repeat="cliente in clientes | filter:searchText">
  <td>{{cliente.idCliente}}</td>
  <td>{{cliente.razaoSocial}}</td>
  <td>{{cliente.nomeFantasia}}</td>
  <td ng-repeat="contato in cliente.contatosClientes>{{contato.email}}</td>
  <td>
     <div class="right floated ui green icon buttons">
        <div class="ui button">Editar</i></div>
     </div>
  </td>
</tr>

answered Jul 6, 2015 at 19:12

Ori Price

4,3112 gold badges24 silver badges37 bronze badges

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

Collectives™ on Stack Overflow

Issues parsing a nested JSON with AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related