使用 Angular 提取特定的 Json 数据答案

【问题标题】：Using angular to extract specific Json data使用 Angular 提取特定的 Json 数据
【发布时间】：2017-09-11 15:46:37
【问题描述】：

谁能指出我哪里出错了。

这是一个非常简单的应用程序，旨在打印出 Json 对象数组中的“名称”字段，这是通过以下行完成的：

{{ctrl.contact[0].results[0].name.first}} 或
{{ctrl.contact[1].results[0].name.first}}

（这本身看起来很复杂）

我无法让它逐个循环打印出每个 Json 块的名称，这是我尝试过的：

        <div ng-repeat="i in ctrl.contact">
            <span>{{ctrl.contact[i].results[0].name.first}}</span>
        </div>

经过几个小时的调整和编辑后，我确信我的角度设置（应用程序、控制器等）很好。

下面的代码sn-p：

<html ng-app="ContactAppApp">
<head>
  <title>My Contact App</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
</head>

<body>
    <div>
        <div ng-controller="ContactAppController as ctrl">
             
             <h1>{{ctrl.test}}</h1>
            
            <div ng-repeat="i in ctrl.contact">
                <span>{{ctrl.contact[0].results[0].name.first}}</span>
            </div>
            
        </div>
        
    </div>
</body>

<script>
    
    var app = angular.module("ContactAppApp", [])
    app.controller("ContactAppController", ContactAppController);
    
    function ContactAppController() {
       
       this.test = "This text is generated by Angular";
        
        this.contact = [
            {
                "results": [
                    {
                        "gender": "male",
                        "name": {
                            "title": "mr",
                            "first": "tony",
                            "last": "cruz"
                        },
                        "location": {
                            "street": "9813 north road",
                            "city": "edinburgh",
                            "state": "humberside",
                            "postcode": "E84 4YD"
                        }
                    }
                ]
            },
            {
                "results": [
                    {
                        "gender": "male",
                        "name": {
                            "title": "mr",
                            "first": "Jack",
                            "last": "cruz"
                        },
                        "location": {
                            "street": "9813 north road",
                            "city": "edinburgh",
                            "state": "humberside",
                            "postcode": "E84 4YD"
                        }
                    }
                ]
            }
        ]
    }

</script>
</html>

【问题讨论】：

标签： javascript angularjs json angularjs-ng-repeat

【解决方案1】：

尝试以下方法：

<div ng-repeat="i in ctrl.contact">
    <span>{{i.results[0].name.first}}</span>
</div>

【讨论】：

太棒了。工作，非常感谢。那么我指的是什么？它是当前迭代中持有的对象吗？它似乎不是基于答案的循环计数器/数字
i 指的是当前对象。您可以使用ng-repeat="(i, contact) in ctrl.contact" 语法，在这种情况下i 将引用当前索引。您也可以简单地使用特殊关键字$index 和ngRepeat 指令。
正确，在这种情况下i是数组ctrl.contact的每个元素的表示

【解决方案2】：

我会稍微不同地设置您的阵列。试试这样的：

this.contact = {
    "results": [
          {
            "gender": "male",
            "name": {
                "title": "mr",
                "first": "tony",
                "last": "cruz"
            },
            "location": {
                "street": "9813 north road",
                "city": "edinburgh",
                "state": "humberside",
                "postcode": "E84 4YD"
            }
        },
        {
              "gender": "male",
              "name": {
                  "title": "mr",
                  "first": "Jack",
                  "last": "cruz"
              },
              "location": {
                  "street": "9813 north road",
                  "city": "edinburgh",
                  "state": "humberside",
                  "postcode": "E84 4YD"
              }
         }
    ]
}

然后在你的 ng-repeat 中尝试这样的操作：

<div ng-repeat="item in contact.results">
    <span>{{item.name.first}} {{$index}}</span>
</div>

如果您尝试跟踪数组中项目的索引，请使用 $index，而不是 i。

【讨论】：