如何将json对象呈现为表格?

时间:2016-01-22 19:40:04

标签: javascript angularjs

首先看看我从后端收到的数据:

{
   "55f6de98f0a50c25f7be4db0":{
      "clicks":{
         "total":144,
         "real":1
      },
      "conversions":{
         "total":4,
         "amount":229
      },
      "cost":{
         "cpc":0.1999999999999995,
         "ecpc":1145.0000000000027,
         "total":28.79999999999993
      },
      "revenue":{
         "total":4,
         "epc":0.027777777777777776
      },
      "net":{
         "roi":-1.1612903225806457,
         "total":4
      },
     "name":"Traffic Source #2",
   },       
   "55f6de98f0a50c25f7be4dbOTHER":{
      "clicks":{
         "total":144,
         "real":1
      },
      "conversions":{
         "total":4,
         "amount":229
      },
      "cost":{
         "cpc":0.1999999999999995,
         "ecpc":1145.0000000000027,
         "total":28.79999999999993
      },
      "revenue":{
         "total":4,
         "epc":0.027777777777777776
      },
      "net":{
         "roi":-1.1612903225806457,
         "total":4
      }
     "name":"Traffic Source #3"
   },

}

现在是代码,这个html正是我不想要的:

    <table>
        <tr>
            <th>1 header</th>
            <th>2 header</th>
            <th>3 header</th>
        </tr>
        <tr ng-repeat="thing in things">
            <td>{{thing.asfs}}</td>
            <td>{{thing.asx}}</td>
            <td>{{person.dsf}}</td>
        </tr>
    </table>

我想要这样的东西

<table>
    <tr ng-repeat="head in heads">
        {{head}}
    </tr>
    <tr ng-repeat="bar in bars">
        <td ng-repeat="foo in foos">{{foo[bar]}} //or whatever it is</td>
    </tr>
</table>

此外,有时该对象会增长,可能会出现更多像这样的密钥55f6de98f0a50c25f7be4db0

我用我收到的完全相同的数据做了这个小提琴,所以也许你可以通过玩那个小提琴来帮助我http://jsfiddle.net/kehaL8av/

这是设计师给我完成任务的表格

enter image description here

说流量来源,我需要渲染每个对象中的键/值:"name":"Traffic Source #3"

有什么建议吗?

修改

不要关闭这个,因为我要关闭我做的最后一个问题,因为我编辑了很多次,这是我需要你帮助我的问题,另一个问题太冗长了。遗憾。

1 个答案:

答案 0 :(得分:-1)

尝试使用AngularJS - Google AngularJS JSON表