CODEWITHSUNDEEP
angularjsjson
Nicoleta Wilskon
Nicoleta Wilskon

Reputation: 697

Insert response data into table

Response : 

    {
    "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"
          }
        ]
      }
    }
  }

I have to insert the above shortname, groupzname,groupzcode, area,city,country etc from this response to table dynamically.

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


            }); 
        };

If I pass above request and console the data , facing error which keep on incrementing. angular.js:68 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: []

Upvotes: 3

Views: 1017

Answers (3)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

In controller,

store the required json data in object;

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

This will cause two way data binding.Whenever the data is changes it get automatically reflected in view.

In the view, use ng-repeat directive,

e.g. for using div.

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

Upvotes: 0

S Kumar
S Kumar

Reputation: 595

Use the following code to display into table.

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

output is the json output.

Upvotes: 2

asdf_enel_hak
asdf_enel_hak

Reputation: 7630

As angular is MVC framework, you don't worry updates between views and model, all is done by controller automatically.

Upvotes: -1

Related Questions