Json object output of array to be displayed in ng-repeat

Question

I have json output from api wants to display in ng-repeat on div

[
        {
            "companyName": "abc",
            "namesList": [
                {
                    "name": "Jaakr1",
                    "email": "[email protected]",
                    "job": "Developer 1"
                },
                {
                    "name": "janam1",
                    "email": "[email protected]",
                    "job": "Developer 2"
                }
            ]
        }
    ]

I want to display like this

<div class="list-row">
            <div class="list-cell">abc</div>
            <div class="list-cell">Jaakr1</div>
            <div class="list-cell">[email protected]</div>
            <div class="list-cell">Developer 1</div>
</div>
<div class="list-row">
        <div class="list-cell"></div>
        <div class="list-cell">janam1</div>
        <div class="list-cell">[email protected]</div>
        <div class="list-cell">Developer 2</div>
</div>

Please provide the solution

Check the answer i have posted that is pretty much generalized and works with multiple JSON objects inside the array. — Ankit Agarwal
– Ankit Agarwal, Commented Jun 28, 2017 at 12:46

Ankit Agarwal · Accepted Answer · 2017-06-28 12:45:06Z

Apart from all the answers posted above i would like to post mine that will handle multiple JSON objects inside the array. Since you have only one object right now one of the above solution may work but when you have more that one object inside the array then this will work great.

HTML

<div ng-app='app' ng-controller='mainCtrl'>
  <div ng-repeat="(key1, value1) in data">
      <div class="list-row" ng-repeat="(key2, value2) in data[key1].namesList">
            <div class="list-cell"><span ng-if='$index == 0'>{{data[key1].companyName}}</span>                </div>
            <div class="list-cell">{{value2.name}}</div>
            <div class="list-cell">{{value2.email}}</div>
            <div class="list-cell">{{value2.job}}</div>
    </div>
  </div>


</div>

Controller

angular.module('app',['QuickList']).controller('mainCtrl', function($scope){
   $scope.data = [
        {
            "companyName": "abc",
            "namesList": [
                {
                    "name": "Jaakr1",
                    "email": "[email protected]",
                    "job": "Developer 1"
                },
                {
                    "name": "janam1",
                    "email": "[email protected]",
                    "job": "Developer 2"
                }
            ]
        },
        {
            "companyName": "abc2",
            "namesList": [
                {
                    "name": "Jaakr12",
                    "email": "[email protected]",
                    "job": "Developer 12"
                },
                {
                    "name": "janam12",
                    "email": "[email protected]",
                    "job": "Developer 22"
                }
            ]
        }
    ];
})

For more generalization i have added two JSON objects inside the array and the output is exactly what you expected. To play around i have added the JSFIDDLE

Rafael Gadotti Bachovas · Accepted Answer · 2017-06-28 12:31:04Z

0

<div *ngFor="let person of jsonObj.namesList">
    <div class="list-cell"></div>
    <div class="list-cell">{{ person.name }}</div>
    <div class="list-cell">{{ person.email }}</div>
    <div class="list-cell">{{ person.job}}</div>
</div>

answered Jun 28, 2017 at 12:31

Rafael Gadotti Bachovas

4034 silver badges13 bronze badges

Comments

Sajeetharan · Accepted Answer · 2017-06-28 12:31:19Z

You can do this,

<div ng-repeat="item in myArray[0].namesList" class="list-row">
        <div class="list-cell">{{item.name}}</div>
        <div class="list-cell">{{item.email}}</div>
        <div class="list-cell">{{item.job}}</div>
    </div>

DEMO

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

myApp.controller('ReqAppController', function ReqAppController($scope) {
    $scope.myArray = [
        {
            "companyName": "abc",
            "namesList": [
                {
                    "name": "Jaakr1",
                    "email": "[email protected]",
                    "job": "Developer 1"
                },
                {
                    "name": "janam1",
                    "email": "[email protected]",
                    "job": "Developer 2"
                }
            ]
        }
    ];
});

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

<head>
    <meta charset="UTF-8">
    <title>New Request</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller="ReqAppController">
    <div ng-repeat="item in myArray[0].namesList" class="list-row">
        <div class="list-cell">{{item.name}}</div>
        <div class="list-cell">{{item.email}}</div>
        <div class="list-cell">{{item.job}}</div>
    </div>
</body>

</html>

Vikram Kumar · Accepted Answer · 2017-06-28 12:32:13Z

0

You can do something like this:

<div class="list-row" ng-repeat="nameObj in data.namesList">
        <div class="list-cell">{{data.companyName}}</div>
        <div class="list-cell">{{nameObj.name}}</div>
        <div class="list-cell">{{nameObj.email}}</div>
        <div class="list-cell"{{nameObj.job}}</div>
</div>

answered Jun 28, 2017 at 12:32

Vikram Kumar

3101 gold badge2 silver badges10 bronze badges

Collectives™ on Stack Overflow

Json object output of array to be displayed in ng-repeat

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related