Problems with parse of JSON in Angularjs

Question

I have a controller that returns a JSON object in 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 I have a template that tries to format the data above as follows :

<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 the higher keys (idCliente, razaoSocial, etc) I can access with the syntax objeto.chave, but the keys to us arrays nested (contatosClientes) I can’t access it the same way (cliente.contatosClientes.email).

I’ve tried everything and I’m even thinking about changing my API, but someone knows how to do it in Angularjs ?

Answer 1

Antonio have you tried to access the items again in an ng-repeat? 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>

I was having the same problem and here I managed to solve so