How to store the JSON data in an array and then display it on the HTML page

Question

I am new to AngularJS framework.

I have a JSON object returned from a REST Web API which has the following data -

[6]
    0:  {
    id: 217554043
    todolist_id: 33897822
    position: 2
    content: "Review about percentage calculation suggested by Someone"
    completed: false
    created_at: "2015-11-10T23:06:01.000+05:30"
    updated_at: "2015-12-01T19:07:21.000+05:30"
    comments_count: 6
    private: false
    trashed: false
    due_on: "2015-12-04"
    due_at: "2015-12-04"
    creator: {
    id: 9329381
    name: "Some Name"
    avatar_url: "HTTP://CDN.37IMG.COM/GLOBAL/B3AE8DFCA054A470C4D660D6096934F50010/AVATAR.GIF?R=3"
    fullsize_avatar_url:  "HTTPS://CDN.37IMG.COM/GLOBAL/B3AE8DFCA054A470C4D660D6096934F50010/ORIGINAL.GIF?R=3"
    }
    1:  {
       (data again as above)
    }
}

In my script opendata is the variable that has the JSON data and then I have a controller under which I have the following condition which stores the data from content: into an array -

if ( opendata.completed == false && opendata.due_on != null ) { 
    var itemName = [];
    scheduled++;
    itemName[scheduled]=opendata.content;
    }

In my HTML page I have a <div> bound to the controller and then -

<h3 id = "newtask" ng-repeat="i in itemName">{{itemName}}</h3>

To display the array, which isn't working for me. How do I get this right?

you need to intialize data on $scope.itemName not var itemName — Upalr
– Upalr, Commented Dec 2, 2015 at 7:17
Thanks for the suggestion. I used $scope and now it Works. — Prashanth L
– Prashanth L, Commented Dec 2, 2015 at 7:45
welcome..i give answer in the answer section ,so pls accept the answer as i give answer on comment first.... — Upalr
– Upalr, Commented Dec 2, 2015 at 8:14

TheKingPinMirza · Accepted Answer · 2015-12-02 07:22:23Z

1

Assuming that the following line is working for you. Mean opendata.content has valid data returned from API in Json format.

itemName[scheduled]=opendata.content;

Than, all you need to declare your variable as global.

var itemName = []; // won't work

$scope.itemName = []; //should work

$scope make it global variable and can be accessed in your view.

answered Dec 2, 2015 at 7:22

TheKingPinMirza

9,0926 gold badges54 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to store the JSON data in an array and then display it on the HTML page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related