CODEWITHSUNDEEP
javascriptphpangularjs
Asmita
Asmita

Reputation: 171

if condition in ng-repeat on a variable

I get data in angularjs from sql query as:

{"orders":[
{
    "orderId":"1674","itemId":"468","SubTotal":"40.00","Total":"48.98","Status":"Printed","Title":"Mangled : Large","Quantity":"1","dateCreated":"2009-06-03"
},
{
    "orderId":"1674","itemId":"469","SubTotal":"40.00","Total":"48.98","Status":"Printed","Title":"Skull Collage : Large","Quantity":"1","dateCreated":"2009-06-03"
},
{
    "orderId":"1675","itemId":"33949","SubTotal":"40.00","Total":"48.98","Status":"Printed","Title":"Summerside \"The Saved\" EP CD -Red or Blue! : BLUE","Quantity":"1","dateCreated":"2009-06-03" 
},
{
    "orderId":"1674","itemId":"33954","SubTotal":"40.00","Total":"48.98","Status":"Printed","Title":"Summerside \"The Saved\" EP CD -Red or Blue! : RED","Quantity":"1","dateCreated":"2009-06-03"
}]}

now I want to find out how many records are having same orderId, so that I could place them in same section/div and display it as 1 group.

I am using ng-repeat to display data. 

<div ng-repeat="order in itemorders">
<div class="order-lis-box border-radius">
    <div class="up line overflow-hidden text">
        <div class="fl black mb10">Order No. <span>{{ order.orderId }}</span><br><span class="capitalize grey F14 bold">Rs. {{ order.Total }}</span></div>
        <div class="custom-datetime text-right">{{ order.dateCreated }}</div>
    </div>
    .
    .
    .
</div> <!-- order-lis-box -->

What should I add use so I could show the way I want?

Upvotes: 3

Views: 130

Answers (2)

Daniele Sassoli
Daniele Sassoli

Reputation: 898

To accomplish something similar you can use angular.filter, and then use the GroupBy function.

After injecting anular-filter in your app, you will only need to 

<div ng-repeat="(key,value) in orders | groupBy: 'orderId'">
    <div class="fl black mb10">Order No. <span>{{ key }}
    <div class="order-lis-box border-radius" ng-repeat="order in value">
    <div class="up line overflow-hidden text">
    </span><br><span class="capitalize grey F14 bold">Rs. {{ order.Total }}</span></div>
    <div class="custom-datetime text-right">{{ order.dateCreated }}</div>
</div>
.
.
.
</div>

here is a plunker with an example of your case.

Upvotes: 3

ben
ben

Reputation: 428

Why don't you create a Javascript function to change your JSON object to 

{
    "orders":
    [
        {
            "orderId":"1674",
            "items" : 
            [
                {
                    "itemId":"468",
                    "SubTotal":"40.00",
                    "Total":"48.98",
                    "Status":"Printed",
                    "Title":"Mangled : Large",
                    "Quantity":"1",
                    "dateCreated":"2009-06-03"
                },
                {
                    "itemId":"469",
                    "SubTotal":"40.00",
                    "Total":"48.98",
                    "Status":"Printed",
                    "Title":"Skull Collage : Large",
                    "Quantity":"1",
                    "dateCreated":"2009-06-03"
                },
                {
                    "itemId":"33954",
                    "SubTotal":"40.00",
                    "Total":"48.98",
                    "Status":"Printed",
                    "Title":"Summerside \"The Saved\" EP CD -Red or Blue! : RED",
                    "Quantity":"1",
                    "dateCreated":"2009-06-03"
                }
            ]
        },
        {
            "orderId":"1675",
            "items" : 
            [
                {
                    "itemId":"33949",
                    "SubTotal":"40.00",
                    "Total":"48.98",
                    "Status":"Printed",
                    "Title":"Summerside \"The Saved\" EP CD -Red or Blue! : BLUE",
                    "Quantity":"1",
                    "dateCreated":"2009-06-03" 
                }
            ]
        }
    ]
}

and then it will be easier to manipulate on your HTML file

<div ng-repeat="order in itemorders">
<div class="order-lis-box border-radius">
    <div class="up line overflow-hidden text">
        <div class="fl black mb10">Order No. <span>{{ order.orderId }}</span><br><span class="capitalize grey F14 bold">Rs. {{ order.Total }}</span></div>
        <div class="custom-datetime text-right">{{ order.dateCreated }}</div>
    </div>
     <div class="up line overflow-hidden text" ng-repeat="item in order.items">
        <div class="fl black mb10">Item Id<span>{{ item.itemId }}</span><br></div>
        .
        .
        .
    </div>
</div>

Upvotes: 1

Related Questions