Question

我有来自api的json输出想要在div上显示ng-repeat

[
        {
            "companyName": "abc",
            "namesList": [
                {
                    "name": "Jaakr1",
                    "email": "poonam.kumar@abc.com",
                    "job": "Developer 1"
                },
                {
                    "name": "janam1",
                    "email": "raja@abc.com",
                    "job": "Developer 2"
                }
            ]
        }
    ]

我想像这样显示

<div class="list-row">
            <div class="list-cell">abc</div>
            <div class="list-cell">Jaakr1</div>
            <div class="list-cell">poonam.kumar@abc.com</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">raja@abc.com</div>
        <div class="list-cell">Developer 2</div>
</div>

请提供解决方案

Answer 1

除了上面发布的所有答案，我想发布我将处理数组内的多个JSON对象。由于您现在只有一个对象，因此上述解决方案之一可能有效，但当您在阵列中有更多该对象时，这将非常有效。

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>

控制器

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

为了更加通用化，我在数组中添加了两个JSON对象，输出正是您所期望的。为了玩，我添加了JSFIDDLE

Answer 2

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

Answer 3

你可以这样做，

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

<强>样本

＆＃13;

var myApp = angular.module('ReqWebApp', [])

myApp.controller('ReqAppController', function ReqAppController($scope) {
    $scope.myArray = [
        {
            "companyName": "abc",
            "namesList": [
                {
                    "name": "Jaakr1",
                    "email": "poonam.kumar@abc.com",
                    "job": "Developer 1"
                },
                {
                    "name": "janam1",
                    "email": "raja@abc.com",
                    "job": "Developer 2"
                }
            ]
        }
    ];
});

＆＃13;

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

＆＃13;

Answer 4

您可以这样做：

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

数组的Json对象输出以ng-repeat显示

4 个答案: