Based on angular js

Question

I have array called favouriteProducts=[deptName="",item:object(it contains product info like pid,name,brand)] for example

favouriteProducts[0]=deptName:"Fresh food"
                 item:object 
                    productid:4356178
                    brand:brand_name

favouriteProducts[3]=deptName:"drinks"
                 item:object 
                    productid:4356110
                    brand:brand_name
favouriteProducts[4]=deptName:"drinks"
                 item:object 
                    productid:4356111
                    brand:brand_name

when i display the result the ouput is like (using ng-repeat in html)

fresh food
  productid:4356178
fresh food
 productid:4356179
drinks
 productid:43561710
drinks
 productid:43561711

But i want output in this way

fresh food
 productid:4356178
 productid:4356179
drinks
 productid:43561710
 productid:43561711

can anyone suggest me how to do this?? I want an array like favouriteProducts[0]=deptName:"Fresh food" item:object 0--> productid:4356178 brand:brand_name 1-->productid:4356179 brand:brand_name like this it should appear. department name and respective products

possible duplicate of [Angular ng-repeat conditional wrap items in element (group items in ng-repeat)](http://stackoverflow.com/questions/23493063/angular-ng-repeat-conditional-wrap-items-in-element-group-items-in-ng-repeat) — Sergio Tulentsev, Jul 23 '15 at 11:59
check this also http://stackoverflow.com/questions/29388763/grouping-objects-with-angularjs — Jose the hose, Jul 23 '15 at 12:41

score 0 · Answer 1 · answered Jul 23 '15 at 12:03

You can add the items to the array in the following manner:

favouriteProducts[0]={deptName:"Fresh food", item: {productid:4356178,brand:brand_name};

favouriteProducts[3]={deptName:"drinks",item:{productid:4356110,brand:brand_name};
favouriteProducts[4]={deptName:"drinks", item:{productid:4356111,brand:brand_name}

Then just use ng-repeat in two div tags.

<div ng-repeat="dept in favouriteProducts.deptName">
<h3>{{dept}}</h3>
    <div ng-repeat="item in dept.item">
    {{item.productid}}
    </div>
</div>

score 0 · Answer 2 · answered Jul 23 '15 at 13:07

You can achieve the task in two ways.

Option 1 Use looping and collect all deptNames items under one criteria.

Options 2 Use angular-filter. A wonderful plugin and and a gift to angular developers.

Here is the JSFIDDLE

<h1>Option 1</h1>
<ul ng-repeat="product in newProducts"> {{product.key}}
    <li ng-repeat="(key,value) in product.items">{{value.productid}}</li>
</ul>

<h1>Option 2</h1>
    <ul ng-repeat="(key, value) in products |groupBy:'deptName'">     {{key}}
        <li ng-repeat="(akey,avalue) in value">{{avalue.item.productid}}</li>
    </ul>

Based on angular js

2 Answers2