How to get the length of an observable in Knockout?

knockout observable array
knockout observable object
knockout update observable array
knockout foreach observablearray
get length of observable array typescript
knockout computed array
knockout observablearray length
knockout computed with parameter

I have an observable sizeDetails in knockout and i need to get the length in knockout template. My observable is below

sizeDetails: ko.observable()

On Ajax call success i have set observable as below

  self.sizeDetails({sizeGuideDetails: sizeGuideDetails,
                    shopBySizeDetails: shopBySizeDetails
                  });

How to get sizeGuideDetails and shopBySizeDetails length seperately in knockout template

Since the keys themselves are objects, we have to get their lengths like this.

This is more about JavaScript in general than Knockout. To get the value of a Knockout observable, you call it like a function. e.g.: sizeDetails(). In this case it would return the object, and then we can get individual sizes and return them in an array or whatever format suits you.

function getSizeDetails(){
    const sizeDetailsObject = self.sizeDetails();
    let sizes = [];
    for (var key in sizeDetailsObject) {
        //check if key exists
        if (sizeDetailsObject.hasOwnProperty(key)) {
            //since key is sure to be an object, get its length like this:
            sizes.push(Object.keys(sizeDetailsObject[key]).length);
        }
    }
    return sizes;
};

You could also create a pure Computed observable, whose value updates automatically when sizeDetails gets updated.

self.sizes = ko.pureComputed(function(){
    const sizeDetailsObject = self.sizeDetails();
    let sizes = [];
    for (var key in sizeDetailsObject) {
        if (sizeDetailsObject.hasOwnProperty(key)) {
            sizes.push(Object.keys(sizeDetailsObject[key]).length);
        }
    }
    return sizes;
}, self);

Now you can always get the latest sizes by calling self.sizes().


To get their sizes individually, you can do as Erick and Bivo have mentioned in their answers.

Observable Arrays, Key point: An observableArray tracks which objects are in the array, not the state of So, you can get the underlying JavaScript array by invoking the observableArray as a alert( 'The length of the array is ' + myObservableArray().​length);. data-bind="if:Results().length > 5 " --> This doesnt work even if the record count is > 5 (in the observable array, there are more than 5 items) Please suggest where I am going wrong. Thanks.

Try with

<div data-bind="html: sizeDetails().sizeGuideDetails.length"></div>
<div data-bind="html: sizeDetails().shopBySizeDetails.length"></div>

Computed Observables, firstName() or this.lastName() . Experienced JavaScript coders will regard this as obvious, but if you're still getting to know JavaScript it might seem strange. (  Behind the scenes, an observableArray is actually an observable whose value is an array (plus, observableArray adds some additional features described below). So, you can get the underlying JavaScript array by invoking the observableArray as a function with no parameters, just like any other observable. Then you can read information from that underlying array.

sizeDetails().sizeGuideDetails.length or sizeDetails().sizeGuideDetails().length depending on whether sizeGuideDetails is an observable or not. Same with shopBySizeDetails.

You can use it anywhere you like it in html like:

<span data-bind="text: sizeDetails().sizeGuideDetails().length">

or without any html tags:

<!-- ko if: sizeDetails().sizeGuideDetails().length > 0 -->

some html if the condition is true

<!-- /ko -->

observableArray().length is returning 0 in ko.Computed() · Issue , Calling for the length if an observableArray inside of a ko.Computed will always return 0. -1 1. There are many specific Knockout observableArray functions. We will discuss them one by one below, however technically you can apply all native JavaScript functions to KO observable array. KO Observable functions are as follows, IndexOf() Returns index of item from the array. If item is not found then -1 is retuned. As an output we will get 0.

length property on onbservableArrays · Issue #4 · knockout/knockout , length - that only updates when the observable notifies subscribers and therefore could get out of sync with the length of the array. All opinions  Don't add a length property - use myObservableArray().length instead. Add one as a function - myObservableArray.length() Add one as a property - myObservableArray.length - that only updates when the observable notifies subscribers and therefore could get out of sync with the length of the array.

KnockOut.JS : Checking the length of Observable array, Hello All, I have a table which I am building using KnockOut View Model. If the count of data in the table(count of rows populated) is greater  To make it easy to serialize view model data, including observables and the like, Knockout includes two helper functions: ko.toJS — this clones your view model’s object graph, substituting for each observable the current value of that observable, so you get a plain copy that contains only your data

How to check the length of an Observable array, angular2 get length of array rxjs observable array loop through observable array angular observable to array knockout update observable array get length of  To get around this we can add a dummy observable to the view model, then retrieve and ignore its value from within the computed observable. This will cause the Knockout framework to re-evaluate the computed observable whenever the dummy observable changes:

Comments
  • Are sizeGuideDetails and shopBySizeDetails also objects?
  • @Ray. Yes. Both are objects inside SizeDetails observable
  • Yes. Thank you.
  • Would you consider accepting it? No obligation, it just makes it easier for future readers and also gives reputation points to both parties.
  • Accepted.....:)
  • Is it right to use sizeDetails() ? SizeDetails is an observable and not an observableArray.