CODEWITHSUNDEEP
javascriptarraysangularjsjsonobject
Sameer
Sameer

Reputation: 3526

Display data using ng-repeat AngularJs

I have this type of json object:

[
    {
        "contactsCount": 2,
        "id": 1,
        "userKey": "$2a$10$3jCL8.rJV9/KS11MtrB4r.0uE4Fu/rGwEk.ko0HTkzFNiKXhh1.X.",
        "groupname": "Angular",
        "createdAt": "2018-01-15T07:21:42.000Z",
        "updatedAt": "2018-01-15T07:21:42.000Z",
        "contactgroups": [
            {
                "id": 1,
                "contact": {
                    "id": 1,
                    "gsm": "111111111",
                    "firstname": "Mohamed",
                    "lastname": "Sameer"
                }
            },
            {
                "id": 3,
                "contact": {
                    "id": 3,
                    "gsm": "222222222",
                    "firstname": "Rizwan",
                    "lastname": "Riz"
                }
            }
        ]
    }
]

I am getting this in $scope.modalData.

I have to show my gsm, first name and last name in table:

My jade code:

table.table
tr
 th GSM
 th First Name
 th Last Name

tr(ng-repeat='testData in modalData.contactgroups[0]')
 td {{testData.gsm}} 
 td {{testData.firstname}}
 td {{testData.lastname}}

anyone help me, i am not getting data, can anyone explain me how to do that?

I am getting this response when user click edit button from another table:

$scope.modalData = {};
    $scope.setModal = function (data) {
        $scope.modalData = data;
        console.log($scope.modalData);
    }




Jade:
    td
      a(data-toggle='modal',ng-click='setModal(groups[$index])' ) Groups

Upvotes: 0

Views: 303

Answers (2)

Manvendra Priyadarshi
Manvendra Priyadarshi

Reputation: 255

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Example</title>
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
    <script>
      var app = angular.module('app', []);
      app.controller('MainCtrl', function($scope) {
        $scope.items = [
    {
        "contactsCount": 2,
        "id": 1,
        "userKey": "$2a$10$3jCL8.rJV9/KS11MtrB4r.0uE4Fu/rGwEk.ko0HTkzFNiKXhh1.X.",
        "groupname": "Angular",
        "createdAt": "2018-01-15T07:21:42.000Z",
        "updatedAt": "2018-01-15T07:21:42.000Z",
        "contactgroups": [
            {
                "id": 1,
                "contact": {
                    "id": 1,
                    "gsm": "111111111",
                    "firstname": "Mohamed",
                    "lastname": "Sameer"
                }
            },
            {
                "id": 3,
                "contact": {
                    "id": 3,
                    "gsm": "222222222",
                    "firstname": "Rizwan",
                    "lastname": "Riz"
                }
            }
        ]
    }
]
      });
    </script>
  </head>
  <body ng-controller="MainCtrl">
    <table>
      <tr ng-repeat="item in items[0].contactgroups">
        <td ng-repeat="i in item">{{i.gsm}}</td>
        <td ng-repeat="i in item">{{i.firstname}}</td>
        <td ng-repeat="i in item">{{i.lastname}}</td>
      </tr>
    </table>
  </body>
</html>

Upvotes: 0

Bharadwaj
Bharadwaj

Reputation: 2553

You have to remove [0] from your ng-repeat, then you will get actual array.
Since you have those values under contact object, you have to populate using object and property name. Like,

tr(ng-repeat='testData in modalData.contactgroups')
 td {{testData.contact.gsm}} 
 td {{testData.contact.firstname}}
 td {{testData.contact.lastname}}

Upvotes: 1

Related Questions