AngularJS ng-repeat for an array JSON

Question

I'm working on a code in cordova using AngularJS and two JSON array feeds from parse.com. It is basically for a food item with multiple options with variable pricing. I have defined 2 classes called flavors and sizes (doesn't make sense for the type of food, but please bear with me as I'm just testing out). Each food item has a separate set of flavors and sizes defined. I'm having trouble populating the flavors and sizes. Here is the factory that retrieves data from 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 are as 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, my HTML markup consists of 3 pages, a menu page, an options page and an order page. The menu page populates from the first JSON data and that seems to work perfectly. The options page however is giving me issues. I'm new to retrieving JSON and can't seem to figure this one out. Here is my 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 Would You 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 Your 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 Your 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 From 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 am able to retrieve data from the first JSON, but not the second. I would really appreciate any help.

EDIT: I'm getting close thanks to Gaurav Sachan. Here's a plunker describing my current issue: http://plnkr.co/edit/AmOLsR2rLtco3x9g2q73

The issue now is that the sizes and flavors get repeated for each menu item.

Gaurav Sachan · Accepted Answer · 2015-10-10 07:46:23Z

2

you need to write instead of and 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 Would You 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 Your 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 Your 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 From 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>

answered Oct 10, 2015 at 7:46

Gaurav Sachan

3201 silver badge10 bronze badges

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

10 Comments

Gaurav Sachan Over a year ago

you need to write <md-list-item layout="row" ng-repeat="flavor in options.results.flavors"> instead of <md-list-item layout="row" ng-repeat="flavor in options.results."> and <md-list-item layout="row" ng-repeat="flavor in options.results.sizes"> instead of <md-list-item layout="row" ng-repeat="flavor in options.results">

user3839044 Over a year ago

Thank you for your response. I made the changes as suggested, but it doesn't seem to be working. Previously, with options.results, I got 2 lines with 2 checkboxes, but blank spaces as the name and price weren't being called. With the changes, I don't get those checkboxes or blank spaces either. Please let me know if you have any other suggestions. I appreciate it.

user3839044 Over a year ago

I'm actually close to figuring this out, thanks to your help! I used flavor in options.results[0].flavors and that seemed to do the trick. Now, I'm experiencing this author's issue here: stackoverflow.com/questions/29931187/…

Gaurav Sachan Over a year ago

ok, buddy if u still have any issue, please let me know, i am always ready to help u.

user3839044 Over a year ago

Thanks bud. The problem is, when I use options.results[0].flavors, only the first set of options get repeated. When I use options.results[1].flavors, only the 2nd set gets repeated. When I use options.results.flavors, nothing gets repeated. That's where I'm stuck at. I can't seem to get it working properly.

|

Satyam Koyani · Accepted Answer · 2015-10-10 05:26:16Z

0

I think you want to repeat the loop for the flowers so instead of options use item.flower

edited Oct 10, 2015 at 5:26

Satyam Koyani

4,2842 gold badges26 silver badges49 bronze badges

answered Oct 10, 2015 at 5:06

Mitul

3,4372 gold badges25 silver badges35 bronze badges

1 Comment

user3839044 Over a year ago

Unfortunately, that didn't work. I used item.flavor, it's not targeting it. Thanks though.

Collectives™ on Stack Overflow

AngularJS ng-repeat for an array JSON

2 Answers 2

10 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related