Angular 和 JSON 交互？答案

【问题标题】：Angular and JSON interaction?Angular 和 JSON 交互？
【发布时间】：2015-06-29 15:40:17
【问题描述】：

我正在尝试实现一个涉及 angular.js 和 JSON 的非常基本的系统，但我无法让它发挥作用。我要做的就是在我的 JSON 文件中获取特定字段的值并将其吐到页面上。谁能明白为什么这不起作用？它每次都找到数据库，但我似乎无法访问该对象。

HTML & JS

<html lang="en" ng-app="ngApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>
    var ngApp = angular.module('ngApp', []);
    ngApp.controller('ngCtrl', function($scope, $http){
        $http.get("db.json").success(function(data){
            console.log("Database found");
            $scope.data = data;
        });
    });
</script>
<body ng-controller="ngCtrl">
    <div>Data goes here: {{data.field1}}</div>
</body>
</html>

JSON

[
    {
        "field1":"data1",
        "field2":"data2"
    }
]

我对 Angular 很陌生，所以如果我错过了什么，我不会感到惊讶。

【问题讨论】：

标签： javascript html json angularjs

【解决方案1】：

您的json 回复是array 的objects。因此，您必须使用数组表示法来访问其中的数据。

请参阅下面突出显示的更改：

<div>Data goes here: {{data[0].field1}}</div>
//                         ^^^

您可能希望使用ng-repeat 循环所有数据

<body ng-controller="ngCtrl">
    <div ng-repeat="item in data">
        <span> Field1 : {{item.field1}}</span>
        <span> Field2 : {{item.field2}}</span>
    </div>
</body>

【讨论】：

【解决方案2】：

乍一看，返回的 json 数据似乎是一个对象数组。试试这个

data[0].field1

【讨论】：