working with advavced json data anjular js

Question

我是Anjular JS的新手，我知道如何使用Anjular JS处理基本的json数据。我有令人作呕的 JSON 数据

[
    {
        "activity_user": "[e-mail]",
        "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": "[e-mail]",
        "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;
        });
    };

我指的是使用 AngularJS 访问嵌套的 JSON，但我不明白它

Answer 1

现在你的代码中有几个问题：

演示

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

改变

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

自

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

2. 您的 html 中缺少用于关闭顶级div 的 div 元素。

3. 您正在以全局方式声明您的控制器，这已被弃用，从 AngularJS 1.3 开始不再推荐。请参阅文档参数部分。

而不是像这样声明：

function ListCtrl() {}

您可以改为执行以下操作：

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

4. 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"
  }]

---

爪哇语

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>

我的.json

[
    {
        "activity_user": "[e-mail]",
        "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": "[e-mail]",
        "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: [e-mail]