How to order data in ng-repeat with nested objects as JSON data in angular js

Question

i want to show array of object's properties in angular view. following is the object

$scope._Json = {
    "foo": {
        "ItemDimension1": {
            "Item": "item1",
            "ItemIndex": 1,
            "SelectedItems": [{

                "Code": "Code1" 
            }]
        }
    },
    "bar": {
        "ItemDimension2": {
            "Item": "item2",
             "ItemIndex": 3,
            "SelectedItems": [{

                "Code": "code2" 
            }]
        },
        "ItemDimension3": {
            "Item": "item3",
            "ItemIndex": 2,
            "SelectedItems": [{

                "Code": "Code3" 
            }]
        }
    },
    "Lorem": {
        "ItemDimension4": {
           "Item": "item4",
            "ItemIndex": 5,
            "SelectedItems": [{

                "Code": "Code4" 
            }]
        }
    }
  };

I want to show this in view like

item1 - 1

item3 - 2

item2 - 3

item4 - 5

but it is showing like

item4 - 5

item2 - 3

item3 - 2

item1 - 1

in view template

<label ng-repeat="(catagory, items) in _Json">
          <li ng-repeat="(name, itemslist) in items | orderBy:'itemslist.ItemIndex'">

              <strong>{{itemslist.Item }}</strong> - <strong>{{itemslist.ItemIndex }}</strong> 

            </li>
       </label>

how to order this with ItemIndex ?

is this a proper method ? or do i want to change something?

with respect to Angularjs OrderBy on ng-repeat doesn't work i have tried orderByobject but didnt wrk

check this Plunker source

http://plnkr.co/edit/UCnrGJjLLaEjP7K5geV0?p=preview

@Brett i have tried , but didnt work! Please check this plunker link plnkr.co/edit/UCnrGJjLLaEjP7K5geV0?p=preview — prashanth-g
– prashanth-g, Commented Aug 6, 2014 at 15:23
@Brett working for me. item4 - 5 item2 - 3 item3 - 2 item1 - 1 as result — prashanth-g
– prashanth-g, Commented Aug 6, 2014 at 15:47
Your JSON data isn't an array, yet, you are treating it like one. — Brett
– Brett, Commented Aug 6, 2014 at 16:03

Community · Accepted Answer · 2017-05-23 12:26:38Z

2

You need parameter of ng-repeat to be actuall array in order for built in orderBy to work. See this question: sorting values of a hash object in ngRepeat - angularJS

I would plugin underscore.js ( or lodash) and convert your data upfront.

See your updated fiddle http://plnkr.co/edit/odMCOp65zbyfbEfmU3FX?p=preview

add mapping to your controller (note, this is top level for simplicity, reference to updated fiddle for two level mapping)

$scope._Json = _.map($scope._Json, function( v, k) { 
    return { key: k, value: v}      
})

and change markup to (again, only top level here for simplicity, reference to updated plnkr for two level update):

<label ng-repeat="cat in _Json">
      <li ng-repeat="(name, itemslist) in cat.value | orderBy:'itemslist.ItemIndex'">        
          <strong>{{itemslist.Item }}</strong> - <strong>{{itemslist.ItemIndex }}</strong>               
      </li>
</label>

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Aug 6, 2014 at 16:08

vittore

17.6k6 gold badges46 silver badges84 bronze badges

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

Comments

Kourkis · Accepted Answer · 2014-08-06 15:19:54Z

1

This should do the trick:

<label ng-repeat="(catagory, items) in _Json">
   <li ng-repeat="(name, itemslist) in items | orderBy:'itemslist.ItemIndex':true">
      <strong>{{itemslist.Item }}</strong> - <strong>{{itemslist.ItemIndex }}</strong> 
   </li>
</label>

See https://docs.angularjs.org/api/ng/filter/orderBy

answered Aug 6, 2014 at 15:19

Kourkis

573 bronze badges

1 Comment

Kourkis Over a year ago

My bad, I didn't pay attention. You should check stackoverflow.com/questions/23920028/… or stackoverflow.com/questions/14478106/… or stackoverflow.com/questions/19387552/… , you should be able to make it work.

Collectives™ on Stack Overflow

How to order data in ng-repeat with nested objects as JSON data in angular js

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related