Zichen Ma Zichen Ma - 1 year ago 35
JSON Question

How to use AngularJS to display an json API the key is two words?

I met a problem which is using AngularJS to display a json file which the key contains two words like this:

items: [
{
period: "2017-05-01",
total: 3901,
eloisa moreira: 142,
william morales: 0,
lenilda carvalho: 0,
anamaris gonzalez: 0,
juliana ambroise: 1,
ana luiza theriault: 622,
teresa daveiga: 0
}]


I use:

<tr ng-repeat="data in data.items">
<td>{{data.period}}</td>
<td>{{data.total}}</td>
<!--<td>{{data.eloisa moreira}}</td> -->
</tr>


The first two values are displayed fine, but the third one: {{data.eloisa moreira}} give me error:
angular.js:13708 Error: [$parse:syntax] Syntax Error: Token 'moreira' is an unexpected token at column 13 of the expression [data.eloisa moreira] starting at [moreira].
Any one how to resolve this problem?

Answer Source

if you are intended to show all fields of the object, you can use a inner ng-repeat with (key, value) to avoid redundant code and hardcoding properties of object.

<tr ng-repeat="data in data.items">
  <td ng-repeat="(key, value) in data">{{value}}</td>
</tr>

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.data = {
      items: [{
        "period": "2017-05-01",
        "total": 3901,
        "eloisa moreira": 142,
        "william morales": 0,
        "lenilda carvalho": 0,
        "anamaris gonzalez": 0,
        "juliana ambroise": 1,
        "ana luiza theriault": 622,
        "teresa daveiga": 0
      }]
    };
  });
.solid {
  border: 1px;
  border-style: solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <table class="solid">
    <tr ng-repeat="data in data.items">
      <!--<td>{{data.period}}</td>
      <td>{{data.total}}</td>
      <td>{{data.eloisa moreira}}</td> -->
      <td ng-repeat="(key, value) in data">{{value}}</td>
    </tr>
  </table>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download