How to sort nested objects in angularjs (ng-repeat)

Question

I am facing problem to sort an multiple object with nested property(Price)

{  
"EI":[  
  {  
     "offerid":"1S-EI-715",
     "Price":"30.00"
  },
  {  
     "offerid":"1S-IB-518",
     "Price":"20.00"
  }
  ],
"IB":[  
  {  
     "offerid":"1S-IB-518",
     "Price":"10.00"
  },
  {  
     "offerid":"1S-IB-518",
     "Price":"40.00"

  }
]}

I need to sort the price like below. Is it possible to sort like that. Kindly give some solution for this. Thanks in advance

{  
"IB":[  
  {  
     "offerid":"1S-IB-518",
     "Price":"10.00"
  },
  {  
     "offerid":"1S-IB-518",
     "Price":"40.00"

  }
  ]
 "EI":[ 
   {  
     "offerid":"1S-IB-518",
     "Price":"20.00"
  }
  {  
     "offerid":"1S-EI-715",
     "Price":"30.00"
  },
   ]}

charlietfl · Accepted Answer · 2016-07-28 16:50:25Z

1

Objects can't be sorted. I suggest you map the data to single array that would like more like:

[
    {
        "type" : "EI",
        "offerid" : "1S-EI-715",
        "Price" : "30.00"
    },       
    {
        "type" : "IB",
        "offerid" : "1S-IB-518",
        "Price" : "40.00"    
    }
]

var data = {
  "EI": [{
    "offerid": "1S-EI-715",
    "Price": "30.00"
  }, {
    "offerid": "1S-IB-518",
    "Price": "20.00"
  }],
  "IB": [{
    "offerid": "1S-IB-518",
    "Price": "10.00"
  }, {
    "offerid": "1S-IB-518",
    "Price": "40.00"
  }]
}

var results = Object.keys(data).reduce(function(arr, key) {
  var newItems = data[key].map(function(item) {
    item.type = key;
    return item
  })
  return arr.concat(newItems)
}, []).sort(function(a, b) {
  return +a.Price - +b.Price
})

console.log(results)

answered Jul 28, 2016 at 16:50

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Comments

daan.desmedt · Accepted Answer · 2016-07-28 15:18:52Z

0

See possible solution using ng-repeat on view level. Showing desc and asc approach.

VIEW

<div id="app" ng-app="myApp" ng-controller="myCtrl">
  <b>Order ASC</b>
  <div ng-repeat="(name,data) in myarr">
    {{name}}
    <br/>
    <div ng-repeat="(itemindex,itemdata) in data | orderBy:'Price'">
      {{itemdata}}
    </div>
  </div>
  <br/>
  <b>Order DESC</b>
  <div ng-repeat="(name,data) in myarr">
    {{name}}
    <br/>
    <div ng-repeat="(itemindex,itemdata) in data | orderBy:'-Price'">
      {{itemdata}}
    </div>
  </div>
</div>

MODULE

angular.module('myApp', []).controller('myCtrl', function($scope) {

  $scope.myarr = {
    "EI": [{
      "offerid": "1S-EI-715",
      "Price": "30.00"
    }, {
      "offerid": "1S-IB-518",
      "Price": "20.00"
    }],
    "IB": [{
      "offerid": "1S-IB-518",
      "Price": "10.00"
    }, {
      "offerid": "1S-IB-518",
      "Price": "40.00"
    }]
  };

});

RESULT

Order ASC
EI 
{"offerid":"1S-IB-518","Price":"20.00"}
{"offerid":"1S-EI-715","Price":"30.00"}
IB 
{"offerid":"1S-IB-518","Price":"10.00"}
{"offerid":"1S-IB-518","Price":"40.00"}

Order DESC
EI 
{"offerid":"1S-EI-715","Price":"30.00"}
{"offerid":"1S-IB-518","Price":"20.00"}
IB 
{"offerid":"1S-IB-518","Price":"40.00"}
{"offerid":"1S-IB-518","Price":"10.00"}

See Fiddle

answered Jul 28, 2016 at 15:18

daan.desmedt

3,8201 gold badge22 silver badges33 bronze badges

1 Comment

Pravin Over a year ago

While order by ASC, parent IB should come first because inside IB I am having 10 then 40. Parent also have to be sorted.

Collectives™ on Stack Overflow

How to sort nested objects in angularjs (ng-repeat)

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related