javascript - 使用Angular提取特定的Json数据

标签 javascript angularjs json angularjs-ng-repeat

有人可以指出我在哪里犯了错误吗?

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

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

(这本身看起来很复杂)

我无法让它通过循环单独打印每个 Json block 的名称,这是我尝试过的:

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

花了几个小时调整和编辑后,我确信我的 Angular 设置(应用程序、 Controller 等)很好。

代码片段如下:

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

最佳答案

尝试以下操作:

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

关于javascript - 使用Angular提取特定的Json数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46159585/

相关文章:

javascript - ng-controller 不向浏览器呈现数据

javascript - Cart to Fly Uncaught TypeError : Cannot read property 'top' of undefined

javascript - 在 CouchDB 中, 'this' 指的是什么?

javascript - Angularjs 下拉列表选择值

angularjs - 'f' 字符在 ng-show 中被认为是真的

javascript - lodash - 通过提供两个要在其中查找的值来查找所有对象

python - 如何将 JSON 转换为更易于阅读的内容?

json - Mule ESB,以类似 JSON 的格式返回数据库连接器数据

javascript - JQuery提交表单参数为空

javascript - 为什么这个函数返回 "undefined"而不是数组?