在Angular中使用ng-repeat在表中显示json响应

I have a response as given below

我的回复如下

Response :

 response: 
{"json":
{"response":
{"servicetype":"",
"functiontype":"",
"statuscode":"0",
"statusmessage":"Success",
"data":[{"graphtype":"piechart",
"xlabel":"state",
"ylabel":"count",
"s1":"contact",
"s2":"User",
"data":["Total Contacts: 1 Users: 20",
[{"x":"Karnataka","s1":"1","s2":"15","lat":"12.9716","long":"77.5946"},
{"x":"New Delhi","s1":"0","s2":"5","lat":"28.6139","long":"77.2090"}]]}]}}}

I need to insert table row name , table data name dynamically using ng-repeat.

我需要使用ng-repeat动态插入表行名称,表数据名称。

My table shoud look like.

我的桌子看起来像。

State                  Contact                      User 
 Karnatka                1                           15
 New Delhi               0                           5

2 个解决方案

#1

Try this way to access the dynamic title and data.

尝试这种方式来访问动态标题和数据。

Your json response looks quite complex and difficult to access, try to provide simpler json response from server side as much as you can.

您的json响应看起来非常复杂且难以访问,尝试尽可能多地从服务器端提供更简单的json响应。

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = {"json":
{"response":
{"servicetype":"",
"functiontype":"",
"statuscode":"0",
"statusmessage":"Success",
"data":[{"graphtype":"piechart",
"xlabel":"state",
"ylabel":"count",
"s1":"contact",
"s2":"User",
"data":["Total Contacts: 1 Users: 20",
[{"x":"Karnataka","s1":"1","s2":"15","lat":"12.9716","long":"77.5946"},
{"x":"New Delhi","s1":"0","s2":"5","lat":"28.6139","long":"77.2090"}]]}]}}};
  $scope.title = $scope.greeting.json.response.data[0];
  $scope.data = $scope.greeting.json.response.data[0].data[1];
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="GreetingController">
    <table>
      <tr>
        <th>{{title.xlabel}}</th>
        <th>{{title.s1}}</th>
        <th>{{title.s2}}</th>
      </tr>  
      <tr ng-repeat="row in data track by $index">
        <td>{{row.x}}</td>
        <td>{{row.s1}}</td>
        <td>{{row.s2}}</td>
      </tr>
    </table>
</div>

#2

Store response.data in a variable ex:

将response.data存储在变量ex中:

$scope.graphs = response.data;

The view:

<div ng-repeat="graph in graphs"> 

<table>
  <tr>
    <th>{{graph.xlabel}}</th>
    <th>{{graph.s2}}</th> 
    <th>{{graph.s1}}</th>
  </tr>
  <tr ng-repeat="state in graph.data[1]">
    <td>{{ state.x }}</td>
    <td>{{ state.s2 }}</td>
    <td>{{ state.s1 }}</td>
  </tr>
</table>

</div>

Angular table

#1