working with advavced json data anjular js - json

Question

i am new to anjular js , i know how to work with basic json data with anjular js.
i have nauseated json data
[
{
"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\"}]"
}
]
now i want to print it out following format
<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>
here is my controller but it not work
function ListCtrl($scope, $http) {
$http({method: 'GET', url: 'my.json'}).success(function(data) {
$scope.timeline = data;
});
};
i refer Accesing nested JSON with AngularJS but i didn't understand it

Answer 1

There are several problems in your code right now:
DEMO
The interpolated value inside your ng-repeat for the property.list has a dot in it:
change
<div>{{property.list.}}</div>
to
<div>{{property.list}}</div>
You are missing a div element in your html for closing the top level div.
You are declaring your controllers in a global manner, this is already deprecated and no longer recommended as of AngularJS 1.3. See documentation Arguments Section.
Instead of declaring it like this:
function ListCtrl() {}
You can do this instead:
angular.module('yourApp', [])
.controller('ListCtrl', function() {});
The list property is a string, not an array of objects representing comments.
I suggest you change its structure to something like this:
"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

If you re using ( $scope.timeline ), that means you must use in html :
{{timeline[0].activity_user}} // print: asd#gmail.com