将响应数据插入表中

时间:2016-09-05 11:02:31

标签: angularjs json

回应:

    {
    "json": {
      "response": {
        "servicetype": "1",
        "functiontype": "1000",
        "statuscode": "0",
        "statusmessage": "Success",
        "data": [{
            "groupzname": "NARAYANA E-SCHOOL1",
            "groupzcode": "CHATCH",
            "area": "JAYANAGARA 9TH BLOCK",
            "city": "BENGALURU",
            "state": "Karnataka",
            "country": "INDIA"
          },

          {
            "shortname": "School",
            "groupzname": "Smitha School",
            "groupzcode": "4353",
            "area": "fsdfsdf",
            "city": "sdfsf",
            "state": "vxcvxv",
            "country": "vxcvxv"
          }, {
            "shortname": "SerReq",
            "groupzname": "Service R",
            "groupzcode": "SerReq",
            "area": "SerReq",
            "city": "SerReq",
            "state": "SerReq",
            "country": "SerReq"
          }, {
            "shortname": "service",
            "groupzname": "Service Gropz",
            "groupzcode": "1111",
            "area": "jayanagar",
            "city": "bangalore",
            "state": "Karnataka",
            "country": "India"
          }, {
            "shortname": "Testing",
            "groupzname": "Smitha Groupz",
            "groupzcode": "5555",
            "area": "jayanagar 9th block",
            "city": "Bangalore",
            "state": "Karnataka",
            "country": "India"
          },

          {
            "shortname": "May12R2",
            "groupzname": "May12Release2",
            "groupzcode": "May12R2",
            "area": "May12R2Area: ",
            "city": "May12City",
            "state": "May12State",
            "country": "May12Country"
          }, {
            "shortname": "May12",
            "groupzname": "May12Release",
            "groupzcode": "May12",
            "area": "May12 Area",
            "city": "May12 city",
            "state": "May12 State",
            "country": "May12 Country"
          }, {
            "shortname": "Kank",
            "groupzname": "Kankar",
            "groupzcode": "knakr12",
            "area": "Kankar Area",
            "city": "Kankar city",
            "state": "Kankar state",
            "country": "Kankarcountry"
          }, {
            "shortname": "Hir",
            "groupzname": "Heera",
            "groupzcode": "Hir001",
            "area": "Hir are",
            "city": "Hir cit",
            "state": "Hir State",
            "country": "Hir India"
          },

          {
            "shortname": "Apr",
            "groupzname": "Aparajitha",
            "groupzcode": "Apraj20",
            "area": "apar area",
            "city": "apar city",
            "state": "apar state",
            "country": "apar indi"
          }
        ]
      }
    }
  }

我必须动态地从这个响应中插入上面的短名,groupzname,groupzcode,area,city,country等。

JS:

     $scope.viewAccount = function(){
                   $scope.showListAccount = true;

              var json = {

  "json": {
    "request": {
      "servicetype": "6",
      "functiontype": "6014",
      "session_id": $rootScope.currentSession,
           "data": {
        "sortbasedon": $scope.groupzname,
        "orderby": "desc",
        "limit":10,
        "offset":10
           }

    }
  }
};

          UserService.viewListAccount(json).then(function(response) {



                 if (response.json.response.statuscode == 0 && response.json.response.statusmessage == 'Success')

                     $scope.dataArray = response.json.response.data;



                        $scope.myname = $scope.dataArray.shortname;
                        console.log($scope.myname);


            }); 
        };

如果我通过上述请求并控制数据,则面临继续递增的错误。 angular.js:68未捕获错误:[$ rootScope:infdig] 10 $ digest()到达迭代次数。中止!观察者在最近5次迭代中被解雇:[]

3 个答案:

答案 0 :(得分:2)

使用以下代码显示到表格中。

<table>                
    <tr>
        <th>groupzcode</th>
        <th>area</th>
        <th>city</th>
        <th>state</th>
        <th>country</th>
    </tr>
    <tbody>
        <tr data-ng-repeat="data in output.json.response.data">
            <td>{{ data.shortname}}</td>
            <td>{{data.groupzname}}</td>
            <td>{{data.groupzcode}}</td>
            <td>{{data.area}}</td>
            <td>{{data.city}}</td>
            <td>{{data.state}}</td>
            <td>{{data.country}}</td>
        </tr>
    </tbody>
</table>

输出是json输出。

答案 1 :(得分:0)

在控制器中,

将所需的json数据存储在object中;

$scope.arrRec = output.json.response.data

这将导致双向数据绑定。每当数据发生变化时,它都会自动反映在视图中。

在视图中,使用ng-repeat指令

e.g。使用div。

<div ng-repeat="oneRec in arrRec"  >
 {{oneRec.groupzname}}  {{oneRec.groupzcode}}{{oneRec.area}}
</div>

答案 2 :(得分:-1)

由于angular是MVC框架,你不必担心视图和模型之间的更新,所有这些都是由控制器自动完成的。