JSON键包含空格

时间:2017-10-17 07:19:08

标签: angularjs json

我跟随json并需要在表格中显示其名称为" PAY ALL"," PAY PART"," DECLINE",但密钥包含其中的空格也是其对应的全部付费值,付费部分需要显示在相应的表格行数据中。我怎样才能实现它。 我的json对象如下 -

$scope.tableData={

        "KEY-1": "VALUE-1",

        "KEY-2": "VALUE-2",

        "data": {

            "PAY ALL": {

                    "NumberOfBills": "1800000",

                    "CummalativeBillAmount": "45000000",

                    "ResponseProgress": "60"

                },
                "PAY PART": {

                    "NumberOfBills": "6000000",

                    "CummalativeBillAmount": "15000000",

                    "ResponseProgress": "20"

                },
                "DECLINE": {

                    "NumberOfBills": "3000000",

                    "CummalativeBillAmount": "7500000",

                    "ResponseProgress": "10"

                },
                "REQUEST EXTENSION": {

                    "NumberOfBills": "240000",

                    "CummalativeBillAmount": "6000000",

                    "ResponseProgress": "8"

                }

    }

}

另外我需要从上面的json响应中获得以下表格 - table with data

我在html绑定中尝试了以下内容,但它没有显示任何内容。

<tr ng-repeat="dataValue in tableData">
            <td><img src="./assets/images/Group 384@2x.png" class="img-bo"/></td>
            <td>{{dataValue.data["PAY ALL"]}}</td>
            <td><div class="bg">{{dataValue.data.NumberOfBills}}</div></td>
            <td><div class="bg">{{dataValue.data.CummalativeBillAmount}}</div></td>
            <td><div class="bg">{{dataValue.data.ResponseProgress}}</div></td>
          </tr>

请帮忙。

1 个答案:

答案 0 :(得分:1)

您的代码应该是

 <table>
  <tr>
    <th>category </th>
     <th>no of bills</th>
     <th>commulative amount</th>
     <th>response</th>
  </tr>
  <tr ng-repeat="(key,value) in tableData.data">
        <td>{{key}}</td>
            <td><div class="bg">{{value.NumberOfBills}}</div></td>
            <td><div class="bg">{{value.CummalativeBillAmount}}</div></td>
            <td><div class="bg">{{value.ResponseProgress}}</div></td>
          </tr>
  </table>

Here is working fiddle