遍历Angularjs中对象的属性列表答案

【问题标题】：Iterate through a list of properties in object in Angularjs遍历Angularjs中对象的属性列表
【发布时间】：2019-12-06 04:11:32
【问题描述】：

我有这个带有数组的对象：

"{
    "Drivers":[
        {
            "Id":"41ba341a-e50f-4878-b55e-6c96ef5027b0",
            "FirstName":"John",
            "LastName":"David",
            "MiddleName":"Smity",
            "Party":{
                "Id":"12rtb67-fa45-4e77-998c-123fgyh764",
                "Name":"The Smith Family",
                "CustomerId":"01d84752-ad12-4dfa-af63-65d12052a161"
            }
        },
        {
            "Id":"f37ff0c7-294d-43d1-a790-11af1f6f3e91",
            "FirstName":"John",
            "LastName":"Smith",
            "MiddleName":"David",
            "Party":{
                "Id":"f2a82558-fa45-4e77-998c-29160f30f9f6",
                "Name":"The Smith Family",
                "CustomerId":"01d84752-ad12-4dfa-af63-65d12052a161"
            }
        }
    ]
}"

我想遍历 Drivers 对象并在 angularjs foreach 中显示值。

这就是我正在尝试的：

<table data-ng-controller="DriverController">
  <thead>
    <tr>
      <th>Name</th>
    </tr>
  </thead>
  <tbody data-ng-repeat="driver in Drivers.Drivers">
    <tr>
      <td>{{driver.FirstName}}</td>
    </tr>
  </tbody>
</table>

没用。

我也试过了：

<table data-ng-controller="DriverController">
  <thead>
    <tr>
      <th>Name</th>
    </tr>
  </thead>
  <tbody data-ng-repeat="driver in Drivers">
    <tr>
      <td>{{driver.FirstName}}</td>
    </tr>
  </tbody>
</table>

但我得到了相同的结果，屏幕上没有显示数据。

如何遍历数组的属性并将结果显示在表格中，就像我在示例中尝试的那样？

【问题讨论】：

"{"Drivers":[{"Id":"4 设置了什么变量等于这个对象？
另外，这是一个字符串。只是在编辑的时候注意到了。尝试解析它？
是的，这应该是有效的 JSON，因此您可以对字符串执行 JSON.parse 以将其转换为 JS 对象。
使用 angular.fromJson 首先将数据解析为有效的 json 对象。检查Drivers.length 它应该大于零

标签： javascript arrays angularjs angularjs-scope angularjs-ng-repeat

【解决方案1】：

您的 JSON 在示例中是一个字符串。如果这是您从服务器接收它的方式，则需要对其进行解析。除此之外，您的代码可以在这个 plunker 中运行：http://plnkr.co/edit/x2IJRCUUTqpYnombadzn?p=preview

<table data-ng-controller="DriverController">
                    <thead>
                        <tr>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody data-ng-repeat="driver in drivers.Drivers">
                        <tr>
                            <td>{{driver.FirstName}}</td>
                        </tr>
                    </tbody>
                </table>


$scope.drivers = {
    "Drivers":[
        {
            "Id":"41ba341a-e50f-4878-b55e-6c96ef5027b0",
            "FirstName":"John",
            "LastName":"David",
            "MiddleName":"Smity",
            "Party":{
                "Id":"12rtb67-fa45-4e77-998c-123fgyh764",
                "Name":"The Smith Family",
                "CustomerId":"01d84752-ad12-4dfa-af63-65d12052a161"
            }
        },
        {
            "Id":"f37ff0c7-294d-43d1-a790-11af1f6f3e91",
            "FirstName":"John",
            "LastName":"Smith",
            "MiddleName":"David",
            "Party":{
                "Id":"f2a82558-fa45-4e77-998c-29160f30f9f6",
                "Name":"The Smith Family",
                "CustomerId":"01d84752-ad12-4dfa-af63-65d12052a161"
            }
        }
    ]
}

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/angular.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('MyCtrl', function ($scope) {
            $scope.Drivers =
           [
                {
                    "Id": "41ba341a-e50f-4878-b55e-6c96ef5027b0",
                    "FirstName": "John",
                    "LastName": "David",
                    "MiddleName": "Smity",
                    "Party": {
                        "Id": "12rtb67-fa45-4e77-998c-123fgyh764",
                        "Name": "The Smith Family",
                        "CustomerId": "01d84752-ad12-4dfa-af63-65d12052a161"
                    }
                },
                {
                    "Id": "f37ff0c7-294d-43d1-a790-11af1f6f3e91",
                    "FirstName": "John",
                    "LastName": "Smith",
                    "MiddleName": "David",
                    "Party": {
                        "Id": "f2a82558-fa45-4e77-998c-29160f30f9f6",
                        "Name": "The Smith Family",
                        "CustomerId": "01d84752-ad12-4dfa-af63-65d12052a161"
                    }
                }
           ];

        });
    </script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
    <table>
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tbody data-ng-repeat="driver in Drivers">
            <tr>
                <td>{{driver.FirstName}}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

【讨论】：

谢谢，由于某种原因，数组或更好的说法是保存数组的字符串没有按预期工作。我不确定从字符串到 json 数组的转换需要做什么。