Return Json - Angularjs

Question

I am creating an Asp.Net Web.API application and the return of service is in Json.

So far so good, it happens that the main object (Companies) is returning an internal object - citiesFiliais (Branches by City) with a Square Bracket that is not interpreted correctly by View.

In the View I already made a test including the object manually in the page without the inclusion of "[]" and this way when invoking {{city.city.}} the name of each City is displayed without any problem. But when invoking Json directly from the Backend the records for the object citiesFiliais are not displayed on the screen.

I already know that the only problem is the internal "[]" as mentioned above, the question is, how to make the return of the Backend equal to the 2nd example presented below?

1st Example - Current form of JSON:

{ "company": "Industria Reunidas", "fonePrincipal": "3030-9999", "citysFilials": [ { "city": "Belo Horizonte", "state": "MG", "ddd": 31 }, { "city": "Savior", "state": "BA", "area code": 71 }, { "city": "São Paulo", "state": "SP", "ddd": 11 } ] }

2nd Example - How JSON should be generated:

{ "company": "Industria Reunidas", "fonePrincipal": "3030-9999", "citysFilials": { "city": "Belo Horizonte", "state": "MG", "ddd": 31 }, { "city": "Savior", "state": "BA", "area code": 71 }, { "city": "São Paulo", "state": "SP", "ddd": 11 } }

Thank you for the force!!!

Answer 1

Your second example JSON is invalid. Use a parser like the http://json.parser.online.fr/ to test it.

The two patterns in use are as follows::

• Estate: {"chave": "valor"}
• Collection: ["valor1", "valor2", "valor3"]

Your second example tries to implement an object where the properties have no key, only value.

Alternatively you can create keys placeholder using the index:

{
  "empresa": "Industria Reunidas",
  "fonePrincipal": "3030-9999",
  "cidadesFiliais": {
    "0": {
      "cidade": "Belo Horizonte",
      "estado": "MG",
      "ddd": 31
    },
    "1": {
      "cidade": "Salvador",
      "estado": "BA",
      "ddd": 71
    },
    "2": {
      "cidade": "São Paulo",
      "estado": "SP",
      "ddd": 11
    }
  }
}

Note that this makes the property CidadesFiliais describe no longer a collection, but rather an object where the properties 0, 1 and 2 has as value an object.

In most models this is not recommended. The first format is the correct one. My suggestion would be to change your view, and instead of using the format (chave, valor) in colecao in his ng-repeat utilize item in colecao, as in the example below:

angular.module('myApp', [])
.controller('myController', function($scope){

  $scope.valor = {
    "empresa":"Industria Reunidas",
    "fonePrincipal":"3030-9999",
    "cidadesFiliais":[
      {
        "cidade":"Belo Horizonte",
        "estado":"MG",
        "ddd":31
      },
      {
        "cidade":"Salvador",
        "estado":"BA",
        "ddd":71
      },
      {
        "cidade":"São Paulo",
        "estado":"SP",
        "ddd":11
      }
    ]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app="myApp">
  <div ng-controller='myController'>

    {{valor.empresa}}<br/><br/>

    <table>
      <tr>
        <th>UF</th>
        <th>Nome</th>
      </tr>
      <tr ng-repeat='i in valor.cidadesFiliais'>
        <td>{{i.estado}}</td>
        <td>{{i.cidade}}</td>
      </tr>
    </table>
  </div>
</div>