CODEWITHSUNDEEP
javascriptangularjssorting
prashanth-g
prashanth-g

Reputation: 1233

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

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

Upvotes: 1

Views: 3744

Answers (2)

vittore
vittore

Reputation: 17579

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>

Upvotes: 2

Kourkis
Kourkis

Reputation: 57

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

Upvotes: 1

Related Questions