# \`Count\` property for the UX \`\<Each\>\` Component

**URL:** <https://forums.fusetools.com/t/count-property-for-the-ux-each-component/3206>\
**Category:** Feature Suggestions\
**Created:** [May 17, 2016, 5:36pm UTC](https://forums.fusetools.com/t/count-property-for-the-ux-each-component/3206 "2016-05-17T17:36:46Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Elizabeth](https://avatars.discourse-cdn.com/v4/letter/e/34f0e0/32.png) [@Elizabeth](https://forums.fusetools.com/u/Elizabeth)\
**Post date:** [May 17, 2016, 5:36pm UTC](https://forums.fusetools.com/t/count-property-for-the-ux-each-component/3206/1 "2016-05-17T17:36:46Z")

</div>

Hey the Fusers Crew!

The `<Each>` Component is very powerful. Could do a lot more. I have some ideas and so does a few community members I’ve heard but here’s one to get the topic started.

Something like this in UX:

```auto
<Each Items="{data}" Count="12"/>

```

where we could limit the number of items displayed from our datasource is needed.

Cheers,

Elizabeth

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [May 17, 2016, 5:39pm UTC](https://forums.fusetools.com/t/count-property-for-the-ux-each-component/3206/2 "2016-05-17T17:39:36Z")

</div>

An `Invert`/`Reverse` property would be nice as well, where I could do:

```auto
<Each Items="{items}" Invert="True" Count="12">
  ...
</Each>

```

Which would give me the last 12 items in the Array/Observable `items`

---

<div class="post-metadata">

**Author:** ![Fernando\_Lins](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/fernando_lins/32/597_2.png) [@Fernando\_Lins](https://forums.fusetools.com/u/Fernando_Lins)\
**Post date:** [May 17, 2016, 7:12pm UTC](https://forums.fusetools.com/t/count-property-for-the-ux-each-component/3206/3 "2016-05-17T19:12:24Z")

</div>

Hi Elizabeth,

There is already a `Count` property in `Each` which will limit the amount of items it loops. I believe the correct way to limit your _datasource_ items would be by using `<WhileCount>`. As per the documentation:

```auto
<WhileCount Items="{things}" EqualTo="3" GreaterThan="3" >
    <Text>You have 3 or more things.</Text>
</WhileCount>

```

[[https://www.fusetools.com/learn/fuse#whilecount-and-whileempty](https://www.fusetools.com/learn/fuse#whilecount-and-whileempty)]

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [May 17, 2016, 11:24pm UTC](https://forums.fusetools.com/t/count-property-for-the-ux-each-component/3206/4 "2016-05-17T23:24:23Z")

</div>

That’s completely different `Count` only works for just looping, it won’t limit the amount from the datasource.

`WhileCount` is basically a boolean for checking the count of the items.

```auto
<WhileCount Items="{items} LessThan="5">
    <StackPanel>
        <Each Items="{items}" Count="1">
            <Text Value="{}" />
        </Each>
    </StackPanel>
</WhileCount>

```

The above would show **all three** numbers because the `WhileCount` boolean is true

We know `Count` already exist, but it’ll be ignored if `Items` is specified:

```auto
<JavaScript>
    module.exports = {
        items: [1,2,3]
    }
</JavaScript>
<StackPanel>
    <Each Items="{items}" Count="1">
        <Text Value="{}" />
    </Each>
</StackPanel>

```

Will still display all three items, its not limiting them, that’s what we want

---

<div class="post-metadata">

**Author:** ![Elizabeth](https://avatars.discourse-cdn.com/v4/letter/e/34f0e0/32.png) [@Elizabeth](https://forums.fusetools.com/u/Elizabeth)\
**Post date:** [May 19, 2016, 5:50am UTC](https://forums.fusetools.com/t/count-property-for-the-ux-each-component/3206/5 "2016-05-19T05:50:14Z")

</div>

Hi Fernando,

Thanks for the docs but Edwin is correct.

I had tried all the ways with `<WhileCount>` which is just a boolean trigger and does not do any `"limiting"`.

As well as using the `Count` property but as we know that only states how many times to repeat the components nested but with `Items="{}"` … it does nothing. ☹

Cheers,

Elizabeth

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [July 27, 2016, 9:24am UTC](https://forums.fusetools.com/t/count-property-for-the-ux-each-component/3206/6 "2016-07-27T09:24:11Z")

</div>

Any news on this?

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [July 27, 2016, 11:22am UTC](https://forums.fusetools.com/t/count-property-for-the-ux-each-component/3206/7 "2016-07-27T11:22:22Z")

</div>

The quite new Observable.slice([begin[, end]]) should be usefull for this case Elizabeth. Check out the docs here: [https://www.fusetools.com/docs/fusejs/observable#slice-begin-end](https://www.fusetools.com/docs/fusejs/observable#slice-begin-end)

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [July 27, 2016, 7:12pm UTC](https://forums.fusetools.com/t/count-property-for-the-ux-each-component/3206/8 "2016-07-27T19:12:50Z")

</div>

Yes I know this is all possible through javascript but just being able to do this in UX is so much better, because for each view of the same data I’d have to export different observables. Where with this through ux I can export one data set for the view, and manipulate the view through ux however I want.

---

<div class="post-metadata">

**Author:** ![Jake\_Taylor](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_taylor/32/512_2.png) [@Jake\_Taylor](https://forums.fusetools.com/u/Jake_Taylor)\
**Post date:** [August 3, 2016, 12:28pm UTC](https://forums.fusetools.com/t/count-property-for-the-ux-each-component/3206/9 "2016-08-03T12:28:19Z")

</div>

`Items` and `Count` aren’t meant to be used together; it’s true that that won’t do what you want. You do have the option to use `slice` as Kristian mentioned.

Although it would be nice to have a UX feature for this, we simply don’t have one right now.

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [August 3, 2016, 5:06pm UTC](https://forums.fusetools.com/t/count-property-for-the-ux-each-component/3206/10 "2016-08-03T17:06:29Z")

</div>

Could you make an internal ticket for this, I know this is not high priority since we can just use slice, and map out a new observable for each view. But would still love to see this sometime in the future

---

<div class="post-metadata">

**Author:** ![Jake\_Taylor](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_taylor/32/512_2.png) [@Jake\_Taylor](https://forums.fusetools.com/u/Jake_Taylor)\
**Post date:** [August 25, 2016, 2:44pm UTC](https://forums.fusetools.com/t/count-property-for-the-ux-each-component/3206/11 "2016-08-25T14:44:35Z")

</div>

Will do!

---

<div class="post-metadata">

**Author:** ![dszymczak84](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/dszymczak84/32/418_2.png) [@dszymczak84](https://forums.fusetools.com/u/dszymczak84)\
**Post date:** [October 18, 2016, 5:45pm UTC](https://forums.fusetools.com/t/count-property-for-the-ux-each-component/3206/12 "2016-10-18T17:45:57Z")

</div>

Any news on this ?

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [October 19, 2016, 8:42am UTC](https://forums.fusetools.com/t/count-property-for-the-ux-each-component/3206/13 "2016-10-19T08:42:07Z")

</div>

This feature is in the pipeline but not yet released. Keep an eye on upcoming changelogs.

---

<div class="post-metadata">

**Author:** ![Anders\_Schau\_Knatten](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_schau_knatten/32/41_2.png) [@Anders\_Schau\_Knatten](https://forums.fusetools.com/u/Anders_Schau_Knatten)\
**Post date:** [October 25, 2016, 11:32am UTC](https://forums.fusetools.com/t/count-property-for-the-ux-each-component/3206/14 "2016-10-25T11:32:29Z")

</div>

Specifically, keep an eye out for the `Each` properties `Limit` and `Offset` in a release very soon! 🙂