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 http://plnkr.co/edit/UCnrGJjLLaEjP7K5geV0?p=preview — prashanth-g, Aug 06 '14 at 15:23
@Brett working for me. item4 - 5 item2 - 3 item3 - 2 item1 - 1 as result — prashanth-g, Aug 06 '14 at 15:47
Your JSON data isn't an array, yet, you are treating it like one. — Brett, Aug 06 '14 at 16:03

score 2 · Accepted Answer · edited May 23 '17 at 12:26

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>

score 1 · Answer 2 · answered Aug 06 '14 at 15:19

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 06 '14 at 15:19

Kourkis

57
3

My bad, I didn't pay attention. You should check http://stackoverflow.com/questions/23920028/angularjs-orderby-on-ng-repeat-doesnt-work or http://stackoverflow.com/questions/14478106/angularjs-sorting-by-property or http://stackoverflow.com/questions/19387552/angular-cant-make-ng-repeat-orderby-work , you should be able to make it work. – Kourkis Aug 06 '14 at 15:56

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

2 Answers2

Linked