0

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": "[email protected]",
        "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": "[email protected]",
        "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

8
  • Have you put a break point and stepped through your code yet? You can do this on almost any modern browser using developer tools Commented Dec 29, 2014 at 5:20
  • i put console.log(data); it log all array but i doesn't know how to handle it Commented Dec 29, 2014 at 5:23
  • Firstly, check the netwrok traffic and make sure that the right data is coming back. then put a breakpoint on $scope.timeline = data (by clicking in the left hand gutter of the script) Commented Dec 29, 2014 at 5:26
  • Put a breakpoint inside of the controller, check if the controller is getting hit and the state of the variables, also put one in the callback function, should be able to get a better picture Commented Dec 29, 2014 at 5:29
  • Why is your list a string and not an array of comment objects? Commented Dec 29, 2014 at 5:29

2 Answers 2

3

There are several problems in your code right now:

DEMO

  1. 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>
  1. You are missing a div element in your html for closing the top level div.

  2. 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() {});
  1. 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": "[email protected]",
        "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": "[email protected]",
        "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"
          }
        ]
    }
]
Sign up to request clarification or add additional context in comments.

2 Comments

let me movement to try it
tanks for all help me
0

If you re using ( $scope.timeline ), that means you must use in html :

{{timeline[0].activity_user}} // print: [email protected]

6 Comments

do you mean you want "Object(property.list).comment"
yes list comments for each activity_user "list": "{ comment:'coment1'} i want to print comment1
is only give first element how i go loop trough
The timeline[0] is spurious. Stay with your property.
Also I'm mixing my languages. you have to convert your list string to an object before extracting the comment field. I suggest either eval() or JSON.parse()
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.