AngularJS ng-repeat for an array JSON -
i'm working on code in cordova using angularjs , 2 json array feeds parse.com. food item multiple options variable pricing. have defined 2 classes called flavors , sizes (doesn't make sense type of food, please bear me i'm testing out). each food item has separate set of flavors , sizes defined. i'm having trouble populating flavors , sizes. here factory retrieves data parse:
app.factory('parsedata', function($http) { var parsefactory = {}; parsefactory.getitems = function() { return $http({method : 'get',url : 'https://api.parse.com/1/classes/menu/', headers: { 'x-parse-application-id':'x', 'x-parse-rest-api-key':'x'}}) .then(function(response) { return response.data; }); }; parsefactory.getoptions = function() { return $http({method : 'get',url : 'https://api.parse.com/1/classes/options/', headers: { 'x-parse-application-id':'x', 'x-parse-rest-api-key':'x'}}) .then(function(response) { return response.data; }); }; return parsefactory; }); json outputs follows:
{"results": [{"active":false, "createdat":"2015-10-05t20:19:58.264z", "desc":"with arugula, smoked almonds \u0026 chipotle vinaigrette", "img":"https://signsrestaurant.ca/wp-content/uploads/2015/09/watermelon-quinoa-jimaca-salad.jpg", "name":"watermelon quinoa jicama salad (\u003cspan style=\"color: lightblue;\"\u003eve\u003c/span\u003e, \u003cspan style=\"color: goldenrod;\"\u003egf\u003c/span\u003e, \u003cspan style=\"color: yellow;\"\u003edf\u003c/span\u003e)", "objectid":"x1zpkwmvmp", "price":14, "updatedat":"2015-10-09t17:20:50.527z"}, {"active":false, "createdat":"2015-10-05t20:35:01.363z", "desc":"buffalo mozzarella, tomato, marinated artichoke hearts, black olives, pesto \u0026 balsamic drizzle", "img":"https://signsrestaurant.ca/wp-content/uploads/2015/09/mediterranean-salad.jpg", "name":"mediterranean salad (\u003cspan style=\"color: lightgreen;\"\u003ev\u003c/span\u003e, \u003cspan style=\"color: goldenrod;\"\u003egf\u003c/span\u003e)", "objectid":"ni5vspdbun", "price":15, "updatedat":"2015-10-09t17:20:30.545z"}]} and
{"results": [{"createdat":"2015-10-08t19:24:20.527z", "flavors":[ {"active":false,"name":"vanilla","price":8}, {"active":false,"name":"almond","price":8}, {"active":false,"name":"hazelnut","price":8}, {"active":false,"name":"caramel","price":8}], "objectid":"7lctn9mtls", "sizes":[ {"active":false,"name":"small","price":0}, {"active":false,"name":"medium","price":5}, {"active":false,"name":"large","price":10}], "updatedat":"2015-10-10t01:14:19.845z"}, {"createdat":"2015-10-08t19:25:18.172z", "flavors":[ {"active":false,"name":"strawberry","price":8}, {"active":false,"name":"chocolate","price":8}, {"active":false,"name":"mint","price":8}, {"active":false,"name":"cherry","price":8}], "objectid":"drj9mdr7or", "sizes":[ {"active":false,"name":"small","price":5}, {"active":false,"name":"medium","price":10}, {"active":false,"name":"large","price":15}], "updatedat":"2015-10-10t01:14:17.632z"}]} now, html markup consists of 3 pages, menu page, options page , order page. menu page populates first json data , seems work perfectly. options page giving me issues. i'm new retrieving json , can't seem figure 1 out. here options.html markup:
<md-card ng-repeat="item in items.results | filter:true"> <img ng-src="{{item.img}}" class="md-card-image" alt=""> <md-card-content class="content"> <h2 class="md-title"><div ng-bind-html="item.name"></div></h2> <h4>{{ item.price | currency }}</h4> <h4>qty {{ item.qty }}</h4> <md-list> <h2 class="md-title" style="color:#3f51b5;">how many like?</h2> <md-divider></md-divider> <md-list-item layout="row"> <md-slider flex md-primary ng-model="item.qty" step="1" min="1" max="5" aria-label="qty"> </md-slider> </md-list-item> </md-list> <md-list> <h2 class="md-title" style="color:#3f51b5;">choose size</h2> <md-divider></md-divider> <md-list-item layout="row" ng-repeat="size in options.results"> <p>{{ size.name }}</p> <span flex></span> <p>{{ size.price | currency }}</p> <md-checkbox aria-label="size set" class="md-accent" ng-model="size.active"> </md-checkbox> </md-list-item> </md-list> <md-list> <h2 class="md-title" style="color:#3f51b5;">choose flavor</h2> <md-divider></md-divider> <md-list-item layout="row" ng-repeat="flavor in options.results"> <p>{{ flavor.name }}</p> <span flex></span> <p>{{ flavor.price | currency }}</p> <md-checkbox aria-label="flavor set" class="md-accent" ng-model="flavor.active"> </md-checkbox> </md-list-item> </md-list> </md-card-content> <md-action-bar layout="row" layout-align="end center"> <md-button class="md-fab md-accent fab" aria-label="remove cart" ng-click="remove(item);showremovedtoast();" ng-class="{active:item.active}"> <md-icon md-svg-src="img/icons/remove.svg"></md-icon> </md-button> </md-action-bar> </md-card> i able retrieve data first json, not second. appreciate help.
edit: i'm getting close gaurav sachan. here's plunker describing current issue: http://plnkr.co/edit/amolsr2rltco3x9g2q73
the issue sizes , flavors repeated each menu item.
you need write instead of , instead of
<md-card ng-repeat="item in items.results | filter:true"> <img ng-src="{{item.img}}" class="md-card-image" alt=""> <md-card-content class="content"> <h2 class="md-title"><div ng-bind-html="item.name"></div></h2> <h4>{{ item.price | currency }}</h4> <h4>qty {{ item.qty }}</h4> <md-list> <h2 class="md-title" style="color:#3f51b5;">how many like?</h2> <md-divider></md-divider> <md-list-item layout="row"> <md-slider flex md-primary ng-model="item.qty" step="1" min="1" max="5" aria-label="qty"> </md-slider> </md-list-item> </md-list> <md-list> <h2 class="md-title" style="color:#3f51b5;">choose size</h2> <md-divider></md-divider> <md-list-item layout="row" ng-repeat="size in options.results.sizes"> <p>{{ size.name }}</p> <span flex></span> <p>{{ size.price | currency }}</p> <md-checkbox aria-label="size set" class="md-accent" ng-model="size.active"> </md-checkbox> </md-list-item> </md-list> <md-list> <h2 class="md-title" style="color:#3f51b5;">choose flavor</h2> <md-divider></md-divider> <md-list-item layout="row" ng-repeat="flavor in options.results.flavors"> <p>{{ flavor.name }}</p> <span flex></span> <p>{{ flavor.price | currency }}</p> <md-checkbox aria-label="flavor set" class="md-accent" ng-model="flavor.active"> </md-checkbox> </md-list-item> </md-list> </md-card-content> <md-action-bar layout="row" layout-align="end center"> <md-button class="md-fab md-accent fab" aria-label="remove cart" ng-click="remove(item);showremovedtoast();" ng-class="{active:item.active}"> <md-icon md-svg-src="img/icons/remove.svg"></md-icon> </md-button> </md-action-bar> 
Comments
Post a Comment