how to use key value pair in ng-repeat with nested JSON

Question

I am trying to print the fetched data in JSON using angular . The JSON is

"products": { "65": { "5": { "id": 5, "product_id": 1, "client_id": 96, "ticket_id": 65, "sold_by": 6, "product_price": 13000, "sold_from_date": 1434459600, "sold_to_date": 1444741200 }, How to ng-repeat this in the front-end to display the data from this?

I tried this but its not working.

    <div ng-repeat="(product_id, product1) in acct_details.products">
                    <div ng-repeat="(product_id2, product2) in product1">
                        <tr ng-repeat="product in product2">
                            <td> <input class="chkbox-style" type="checkbox"></input>
                                 <p class="para-inline">{{product.product_name}}</p>
                            </td>
                            <td>
                                {{product.product_price | currency:"&#8377;"}}
                            </td>
                            <td>
                                {{product.sold_from_date *1000| date: 'mediumDate'}}
                            </td>
                            <td> 
                                {{product.sold_to_date *1000| date:'mediumDate'}}
                            </td>
                        </tr>
                    </div>
                    </div>****

possible duplicate of [How can I iterate over the keys, value in ng-repeat in angular](http://stackoverflow.com/questions/15127834/how-can-i-iterate-over-the-keys-value-in-ng-repeat-in-angular) — goncalotomas, Jun 18 '15 at 10:17
but how to do that for further nested. i am confused with the flow. — Shikher Aatrey, Jun 18 '15 at 10:20

score 3 · Accepted Answer · answered Jun 18 '15 at 10:46

Firstly, your JSON should be improved. JSON by itself should suffice to understand what is being represented, which in this case does not. My version of your JSON:

"products": {
    "product": {
        "ticket_id": 65,
        "id": 5,
        "details": {
                "product_id": 1,
                "client_id": 96,
                "sold_by": 6,
                "product_price": 13000,
                "sold_from_date": 1434459600,
                "sold_to_date": 1444741200
        }
    }
}

I am assuming that 65 is relevant to the ticket_id and that the 5 corresponds to the id. Thus, I am able to use a proper JSON representation of the data in my HTML:

<div ng-repeat="product in products">
    {{product.ticket_id}}-{{product.id}}
    <div ng-repeat="(key,value) in product.details">
        {{key}}:{{value}}
    </div>
</div>

Keeping your JSON neatly structured will always make your coding easier.

score 0 · Answer 2 · answered Jun 18 '15 at 10:37

As I see it product1 is:

           {
            "5": {
                "id": 5,
                "product_id": 1,
                "client_id": 96,
                "ticket_id": 65,
                "sold_by": 6,
                "product_price": 13000,
                "sold_from_date": 1434459600,
                "sold_to_date": 1444741200
            }

And then product2 is :

{
                "id": 5,
                "product_id": 1,
                "client_id": 96,
                "ticket_id": 65,
                "sold_by": 6,
                "product_price": 13000,
                "sold_from_date": 1434459600,
                "sold_to_date": 1444741200
            }

So you don't need the third ng-repeat. Just call product2.product_price or whatever it is you need.

how to use key value pair in ng-repeat with nested JSON

2 Answers2