How to get the length of an observable in Knockout?

Question

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

Are `sizeGuideDetails` and `shopBySizeDetails` also objects? — Ray, Sep 24 '18 at 13:35
Would you consider accepting it? No obligation, it just makes it easier for future readers and also gives reputation points to both parties. — Ray, Oct 04 '18 at 10:12
@Ray. I have accepted it long back. I have less reputation points so not getting displayed.. Thank you for the answer.. !! — Pavithra, Oct 04 '18 at 10:40
I think you're referring to the upvote button. To 'accept' it you have to click the check next to the answer. Welcome :) — Ray, Oct 04 '18 at 10:43

Ray · Accepted Answer · 2018-09-25T09:25:29.343

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.

score 0 · Answer 2 · answered Sep 24 '18 at 15:11

0

Try with

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

answered Sep 24 '18 at 15:11

Erick D. Machado Alvarez

242
1
3
9

score 0 · Answer 3 · answered Sep 25 '18 at 01:41

0

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:

some html if the condition is true

answered Sep 25 '18 at 01:41

Bivo Kasaju

1,143
3
13
28

Is it right to use sizeDetails() ? SizeDetails is an observable and not an observableArray. – Pavithra Sep 25 '18 at 08:11

How to get the length of an observable in Knockout?

3 Answers3