要在 ng-repeat 中显示的数组的 Json 对象输出答案

【问题标题】：Json object output of array to be displayed in ng-repeat要在 ng-repeat 中显示的数组的 Json 对象输出
【发布时间】：2017-06-28 12:25:51
【问题描述】：

我有来自 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>

请提供解决方案

【问题讨论】：

为什么不将该数据转换为普通的旧数组？
Please provide the solution 认真的吗？试试看！
检查我发布的答案，该答案非常笼统，适用于数组内的多个 JSON 对象。

标签： angularjs json angularjs-ng-repeat

【解决方案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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

演示

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"
                }
            ]
        }
    ];
});

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

【讨论】：

【解决方案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>

【讨论】：