ng-repeat showing json object Angular JS

Question

I have a list of items that I take from a json file via one service. At the end of the list a button can let you add every item to a list containing the elements that you have clicked/add. You can add same item only when you don't exceed the number of availability of items.

I have made a code that basically creates an object everytime you add an item, the problem is that the object build is not very easy for iterate (I have made another question regarding this problem..). When I rendered on the view it appears like a kind of object stringify

Here is part of the code:

the view:

<div ng-repeat="session in sessiones">
   Date:  {{session.date | dateformated }} &nbsp
  Availability: {{session.availability}} &nbsp
  <a ng-click="addItem($index, event, session);" ng-show="addMore"> [Add to cart] </a>

<div ng-repeat="(key, value) in cartItems">
    <h1> {{value.sessions}})</h1>
   </div>

the function in the controller:

$scope.addItem = function(index, event, session) {
  if (session.availability>0){
       $scope.cartItems = $scope.cartItems || {};
       $scope.cartItems[event.id] = $scope.cartItems[event.id] || {title:event.title, sessions:{}}
       $scope.cartItems[event.id].sessions[session.date] =          $scope.cartItems[event.id].sessions[session.date] || {num:0}
       $scope.cartItems[event.id].sessions[session.date].num++;
        session.availability-=1;
        console.log($scope.cartItems);
    }
}

Here's my try on fiddle

Important update---> Here is an example that ilustrates very well what I want to do: just the same but instead of repeating elements when an element is already on the list I have to count the number of times that it has been added

Simple cart list

The fiddle seems to be missing the sessions scope variable — Mouse Reeve
– Mouse Reeve, Commented Jun 19, 2015 at 22:39
@FrnndSgz just add the JSON string as a variable to the .js file. — doldt
– doldt, Commented Jun 19, 2015 at 22:58
@FrnndSgz change the script include method from onload to noWrap, then the basic binding will work. Also, you're trying to reference $scope outside of a controller, which throws an additional error. — doldt
– doldt, Commented Jun 20, 2015 at 14:25

Amy B · Accepted Answer · 2015-06-23 01:49:01Z

1

I fixed it. Fiddle

I didn't see the ADD+ link, so I played with that until it appeared.
I suspected trouble with index, but it was fine.
I noticed the $scope was a different color in the javascript, then noticed that you were assigning addItem to something that wasn't your controller.

So in the end I just moved this down to the bottom, enclosing addItem:

});

answered Jun 23, 2015 at 1:49

Amy B

110k21 gold badges140 silver badges191 bronze badges

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

1 Comment

Frnnd Sgz Over a year ago

I have updated the fiddle, now with your help I can finally reproduce entirely my problem...I'm gonna edit the original question with the link.

Collectives™ on Stack Overflow

ng-repeat showing json object Angular JS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related