Display data using ng-repeat AngularJs

Question

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

Iterate contact object i.e. testData in modalData.contactgroups[0].contact — Satpal
– Satpal, Commented Jan 19, 2018 at 12:29
I would say: tr(ng-repeat='testData in modalData[0].contactgroups') td {{testData.contact.gsm}} ... — D. Braun
– D. Braun, Commented Jan 19, 2018 at 12:34
What does that mean: "setModal(groups[$index])" ? Where does "gropus[$index]" comes from? — D. Braun
– D. Braun, Commented Jan 19, 2018 at 12:39

Bharadwaj · Accepted Answer · 2018-01-19 12:34:53Z

1

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

answered Jan 19, 2018 at 12:34

Bharadwaj

2,5511 gold badge25 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manvendra Priyadarshi · Accepted Answer · 2018-01-19 12:46:19Z

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

Collectives™ on Stack Overflow

Display data using ng-repeat AngularJs

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related