How to sort an Observable Array based on a certain item inside each Array

Question

I have an Observable array in knockout with arrays inside, there is an item inside each of the arrays called 'time'. How would I order the arrays inside my observable array so that they are in order, from low to high, based on the value of the item. The values are in Hour:Minute:Second format.

function viewModel() {
  var self = this;
  
  self.myObservable = ko.observableArray([
  {time: "01:00:00", name: 'frank'},
  {time: "05:30:00", name: 'bob'},
  {time: "03:00:00", name: 'bill'},
  {time: "00:00:21", name: 'john'},
  {time: "00:12:00", name: 'paul'}
  ])
}

adiga · Accepted Answer · 2019-05-29 09:46:14Z

1

Knockout has built-in methods for observableArray which work similar to Array.prototype. You can sort it by using localeCompare

function viewModel() {
  var self = this;

  self.myObservable = ko.observableArray([
      { time: "01:00:00", name: 'frank' },
      { time: "05:30:00", name: 'bob' },
      { time: "03:00:00", name: 'bill' },
      { time: "00:00:21", name: 'john' },
      { time: "00:12:00", name: 'paul' }
    ]);

  self.sort = function() {
    self.myObservable.sort((a, b) => a.time.localeCompare(b.time))
  }
}

ko.applyBindings(new viewModel)

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<!-- ko foreach: myObservable -->
  <span data-bind="text: time"></span><br>
<!-- /ko -->

<button data-bind="click: sort">Sort</button>

edited May 29, 2019 at 9:46

answered May 29, 2019 at 6:41

adiga

35.4k9 gold badges65 silver badges88 bronze badges

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

1 Comment

TEK Over a year ago

Yes, however I think I didn't give the example of my problem clearly, my issues is that I need to order the observable array using a value in HH:MM:SS format. Do you know how I would do that? I have changed my question with a new example. Thanks

Bludev · Accepted Answer · 2019-05-28 16:12:32Z

1

You should use the sort() function.

    self.myObservable.sort(function (left, right) {
        return left.age === right.age ? 0
             : left.age < right.age ? -1
             : 1;
    });

answered May 28, 2019 at 16:12

Bludev

5574 silver badges16 bronze badges

2 Comments

TEK Over a year ago

Yes, however I think I didn't give the example of my problem clearly, my issues is that I need to order the observable array using a value in HH:MM:SS format. Do you know how I would do that? I have changed my question with a new example. Thanks

Bludev Over a year ago

The declaration time: 01:00:00 is not valid in JavaScript, perhaps you meant time: '01:00:00'? In any case, within the comparison function you could convert both values (left and right) into seconds and then compare them.

Collectives™ on Stack Overflow

How to sort an Observable Array based on a certain item inside each Array

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related