Angularjs orderby objects keys

Question

So, I'm trying to create a sorting list in angularjs. Once a person clicks on the name of the value it updates the dom and show the data accordingly. Trying to orderby the value of Bracelet, Charms, and so on... I know I could do something like this:

$scope.sortOptions = ['Bracelets','Charms', 'Earring', ...]; //giving sorting options
$scope.sort = 'Bracelets'; //setting a default sortby item
$scope.active = function(x) {
    return x === $scope.sort ? 'active' : '';
};
$scope.setSort = function(type){ 
    $scope.sort = type.toLowerCase();
};

But this is just one object. I will have multiple objects. Coming from the server.

Here is my Category object:

{
    "Pandora": {
        "id": "1",
        "s1": {
            "d1": "Bracelets",
            "d2": "Charms",
            "d3": "Earrings",
            "d4": "Jewelry",
            "d5": "Necklaces",
            "d6": "Pendants",
            "d7": "Rings"
        }
    }
}

I've been reading that you can't use angularjs orderby without have an array of objects. Answered on StackOverFlow. So in my controller I have this code:

$scope.catData = [];

Then I have a factory that goes to the server grabs the json.

dataFactory.getCat().then(function(res){
  $scope.catData = res.data;
});

Here is what my HTML looks like

<li ng-repeat="(key, value) in catData">
   <a href="#" data-id='{{value.id}}' class="anchor">{{key}}</a>
   <ul class="sub" ng-class="{true: 'activeSlideF'}[value.id == 1]" >
      <span ng-repeat="hi in value.s1 | orderBy:'hi':true">
         <li>
            <a href="#"><i class="fa fa-arrow-right"></i>{{hi}}</a>
         </li>
      </span>     
   </ul>
</li>

I'm thinking that when I set the $scope.catData to an array. Then set $scope.catData = res.data it's getting overridden. I could set $scope.catData = [res.data] but I don't think that's the right way of doing it (or could be?).

Thanks for the help!

Can you further explain how you would like to order the data? Would the user be ordering the existing values in s1 alphabetically or are these only the table headers? — Stephen Rodriguez
– Stephen Rodriguez, Commented Mar 16, 2015 at 13:36
@Stephn_R I would like when the users click the corresponding value in the s1 object the dom would be updated with what value was clicked on. Hope that makes sense. — dowomenfart
– dowomenfart, Commented Mar 16, 2015 at 13:42
@dowomenfart Yes, this does make sense. What about using ng-model and updating a $scope variable using ng-click? — Stephen Rodriguez
– Stephen Rodriguez, Commented Mar 16, 2015 at 13:43
@levi yes, It returns one catData that has multiple objects inside. But as of right now it's only gets one object back from the server because we are in the testing phase. — dowomenfart
– dowomenfart, Commented Mar 16, 2015 at 13:45

Stephen Rodriguez · Accepted Answer · 2015-03-16 14:32:40Z

1

You can achieve this by using ng-click and ng-model to update a scope variable that is displayed in the DOM.

Below is an example and a JSFiddle:

HTML

<div id="pandora" ng-app="myApp">
    <div ng-controller="pandoraController">
        <!--Some display text that updates via the $scope.hi var-->
        <h2 ng-model="hi">{{hi}}</h2>
        <ul ng-repeat="obj in data">
            <!--Repeats the data and includes a function call for the value-->
            <li ng-repeat="entry in obj.s1" ng-click="update(entry)"><button ng-value="{{ entry }}">{{ entry }}</button></li>
        </ul>
    </div>
</div>

JS

var app = angular.module('myApp', []);

// Your data object from before
var myData = "..Some JSON data...";

app.controller('pandoraController', ['$scope',
    function($scope) {
        $scope.hi = "Select a Pandora Product:";
        $scope.data = myData;
        $scope.update = function(val) {
            $scope.hi = val;
        }
    }
]);

JSFiddle

edited Mar 16, 2015 at 14:32

answered Mar 16, 2015 at 14:13

Stephen Rodriguez

1,0371 gold badge12 silver badges22 bronze badges

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

6 Comments

dowomenfart Over a year ago

This is awesome but my question to you is what I added another object like Nike. I don't think this approach would work. Here is the updated fiddle: jsfiddle.net/dowomentfart/xdz0xttg/4. One thing is that this is a test data with pandora. We could have multiple objects. I.E nike, polo, and so on.

Stephen Rodriguez Over a year ago

Sure. Not a problem, let me adjust the fiddle then

Stephen Rodriguez Over a year ago

Ok, so with another repeat for the various objects, you can have them all attach to the click handler update. I updated the jsfiddle

dowomenfart Over a year ago

Thanks for responding and helping and it works perfect. But, I have one more problem. When you click update(entry) I need to update another object at a key of s2 instead of the ng-model. I'll give you a upvote.

Stephen Rodriguez Over a year ago

Yup, you can definitely adjust this controller model to fit as many data objects you need. So long as they all fall into the same $scope, you can attach a single click handler for all of them; or have multiple click handlers!

|

Collectives™ on Stack Overflow

Angularjs orderby objects keys

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related