如何使用AngularJS顯示一個json API的關鍵是兩個字?

[英]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:

我遇到了一個問題,即使用AngularJS來顯示一個json文件,其中的鍵包含兩個單詞,如下所示:

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?

前兩個值顯示正常,但第三個值:{{data.eloisa moreira}}給我錯誤:angular.js:13708錯誤:[$ parse:syntax]語法錯誤:令牌'moreira'是一個意外的令牌表達[data.eloisa moreira]的第13欄,從[moreira]開始。任何人如何解決這個問題?

2 个解决方案

#1


2  

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.

如果要顯示對象的所有字段,可以使用帶有(鍵,值)的內部ng-repeat來避免對象的冗余代碼和硬編碼屬性。

<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>

#2


2  

The key in the JSON Object contains a space, so you can't use the dot-operator shortcut to index into the object. You should be able to use the traditional index approach:

JSON對象中的鍵包含空格,因此您無法使用點運算符快捷方式索引對象。您應該能夠使用傳統的索引方法:

<td>{{data['eloisa moreira']}}</td>

{{data ['eloisa moreira']}}


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2017/05/23/72a29c9d466d666406abd9c410ed27be.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com