Question

我是anjular js的新手，我知道如何使用anjular js处理基本的json数据。我有恶心的json数据

[
    {
        "activity_user": "asd@gmail.com",
        "home_id": "1",
        "recent_connect_address": "South Hill Road, Callington, Cornwall ",
        "recent_connect_postcode": "WA3 1PQ",
        "propertyimg": "a.jpg",
        "datemovein": "2014-12-04 00:00:00",
        "datemoveout": "2016-12-29 00:00:00",
        "list": "[{ comment:\"The $190 Bonavita 1900TS made better coffee than the other machines, according to our 10-person tasting panel. \", date:\"2014-12-01 00:00:00\"},{ comment:\"The $190 Bonavita 1900TS made better coffee than the other machines, according to our 10-person tasting panel. \", date:\"2014-12-01 00:00:00\"}]"
    },
    {
        "activity_user": "asd525@gmail.com",
        "home_id": "2",
        "recent_connect_address": "548 Newton Road, Lowton, Warrington ",
        "recent_connect_postcode": "PL17 7LH",
        "propertyimg": "a.jpg",
        "datemovein": "2014-12-01 00:00:00",
        "datemoveout": "2014-12-31 00:00:00",
        "list": "[{ comment:\"We considered 80 Champagne glasses before testing 10 glasses for 12 hours, and we found that the Schott Zwiesel 1872 Enoteca is best for most people. It’s taller, lighter, and thinner than any glass we tried, with tiny etching to keep Champagne carbonated longer. The tulip shape allows more aromas to reach your nose while still maintaining an elegant profile.\", date:\"2014-12-31 00:00:00\"}]"
    }
]

现在我想按照格式

打印出来

<div class="row" ng-controller="ListCtrl">
<div ng-repeat="property in timeline" >
<div>{{property.activity_user}}</div>
<div class="comments">
<div>{{property.list.}}</div>
</div>

</div>

这是我的控制器，但它不起作用

   function ListCtrl($scope, $http) {

            $http({method: 'GET', url: 'my.json'}).success(function(data) {
            $scope.timeline = data;

        });

    };

我提到Accesing nested JSON with AngularJS，但我不理解

Answer 1

您的代码现在有几个问题：

<强> DEMO

ng-repeat property.list内的插值值中有一个点：

更改

<div>{{property.list.}}</div>

到

<div>{{property.list}}</div>

您在html中缺少div元素来关闭顶级div。
您正在以全局方式声明控制器，已经弃用，不再推荐使用AngularJS 1.3。的 See documentation Arguments Section

而不是像这样声明：

function ListCtrl() {}

您可以这样做：

angular.module('yourApp', []) .controller('ListCtrl', function() {});

list属性是一个字符串，而不是表示注释的对象数组。

我建议你把它的结构改成这样的东西：

"list": [ { "comment": "The $190 Bonavita 1900TS made better coffee than the other machines, according to our 10-person tasting panel. ", "date":"2014-12-01 00:00:00" }, { "comment": "The $190 Bonavita 1900TS made better coffee than the other machines, according to our 10-person tasting panel. ", "date":"2014-12-01 00:00:00" }]

<强>的Javascript

angular.module('demo', []) .controller('ListCtrl', function($scope, $http) { $http({method: 'GET', url: 'my.json'}).success(function(data) { $scope.timeline = data; }); });

<强> HTML

<div class="row" ng-controller="ListCtrl"> <div ng-repeat="property in timeline"> <div>{{property.activity_user}}</div> <div class="comments"> <div ng-repeat="item in property.list"> <div>{{item.comment}}</div> <em>-- {{item.date}}</em> </div> </div> </div> </div>

<强> my.json

[ { "activity_user": "asd@gmail.com", "home_id": "1", "recent_connect_address": "South Hill Road, Callington, Cornwall ", "recent_connect_postcode": "WA3 1PQ", "propertyimg": "a.jpg", "datemovein": "2014-12-04 00:00:00", "datemoveout": "2016-12-29 00:00:00", "list": [ { "comment": "The $190 Bonavita 1900TS made better coffee than the other machines, according to our 10-person tasting panel. ", "date":"2014-12-01 00:00:00" }, { "comment": "The $190 Bonavita 1900TS made better coffee than the other machines, according to our 10-person tasting panel. ", "date":"2014-12-01 00:00:00" } ] }, { "activity_user": "asd525@gmail.com", "home_id": "2", "recent_connect_address": "548 Newton Road, Lowton, Warrington ", "recent_connect_postcode": "PL17 7LH", "propertyimg": "a.jpg", "datemovein": "2014-12-01 00:00:00", "datemoveout": "2014-12-31 00:00:00", "list": [ { "comment": "We considered 80 Champagne glasses before testing 10 glasses for 12 hours, and we found that the Schott Zwiesel 1872 Enoteca is best for most people. It’s taller, lighter, and thinner than any glass we tried, with tiny etching to keep Champagne carbonated longer. The tulip shape allows more aromas to reach your nose while still maintaining an elegant profile", "date":"2014-12-31 00:00:0" } ] } ]

Answer 2

如果您正在使用（$ scope.timeline），则表示您必须使用 html ：

{{timeline[0].activity_user}} // print: asd@gmail.com

使用高级json数据angularjs

2 个答案: