# WhileCount not working properly

**URL:** <https://forums.fusetools.com/t/whilecount-not-working-properly/3899>\
**Category:** How-to Discussions\
**Created:** [March 3, 2017, 8:45am UTC](https://forums.fusetools.com/t/whilecount-not-working-properly/3899 "2017-03-03T08:45:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![\_Kobo](https://avatars.discourse-cdn.com/v4/letter/_/f05b48/32.png) [@\_Kobo](https://forums.fusetools.com/u/_Kobo)\
**Post date:** [March 3, 2017, 8:45am UTC](https://forums.fusetools.com/t/whilecount-not-working-properly/3899/1 "2017-03-03T08:45:06Z")

</div>

HI i’m building a rating star component using whileCount , but it seems to not works as expected.

```auto
          <StackPanel Margin="10" Orientation="Horizontal" ItemSpacing="5" Alignment="Center">
            <WhileCount Items="{note}" EqualTo="0">
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
            </WhileCount>
            <WhileCount Items="{note}" EqualTo="1">
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
            </WhileCount>
            <WhileCount Items="{note}" GreaterThan="1" LessThan="2">
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe839;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
            </WhileCount>
            <WhileCount Items="{note}" EqualTo="2">
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
            </WhileCount>
            <WhileCount Items="{note}" GreaterThan="2" LessThan="3">
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe839;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
            </WhileCount>
            <WhileCount Items="{note}" EqualTo="3">
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
            </WhileCount>
            <WhileCount Items="{note}" GreaterThan="3" LessThan="4">
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe839;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
            </WhileCount>
            <WhileCount Items="{note}" EqualTo="4">
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
            </WhileCount>
            <WhileCount Items="{note}" GreaterThan="4" LessThan="5">
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe83a;" Font="Icomoon" FontSize="26" Color="Yellow"/>
            </WhileCount>
            <WhileCount Items="{note}" EqualTo="5">
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
              <Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
            </WhileCount>
            <Text Value="{NumberVote}" Alignment="Center" FontSize="14"/>
          </StackPanel>

```

`&#xe83a;` represent a empty star , `&#xe838;` represent a full star, `&#xe839;;` represent a half star.  
no matter how much the note observable is equal , the value of my stars still the same, one full stars and 4 empty.

---

<div class="post-metadata">

**Author:** ![\_Kobo](https://avatars.discourse-cdn.com/v4/letter/_/f05b48/32.png) [@\_Kobo](https://forums.fusetools.com/u/_Kobo)\
**Post date:** [March 3, 2017, 3:50pm UTC](https://forums.fusetools.com/t/whilecount-not-working-properly/3899/2 "2017-03-03T15:50:14Z")

</div>

Sorry for not reading well the doc , so the Items need to be a collection, but what in fuse can help me to build a fully working rating component ?

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [March 3, 2017, 4:18pm UTC](https://forums.fusetools.com/t/whilecount-not-working-properly/3899/3 "2017-03-03T16:18:37Z")

</div>

Something like this:

```auto
	<StackPanel Orientation="Horizontal">
		<Each Count="{starcount}">
			<Text Value="&#xe838;" Font="Icomoon" FontSize="26" Color="Yellow"/>
		</Each>
	</StackPanel>

```

---

<div class="post-metadata">

**Author:** ![\_Kobo](https://avatars.discourse-cdn.com/v4/letter/_/f05b48/32.png) [@\_Kobo](https://forums.fusetools.com/u/_Kobo)\
**Post date:** [March 3, 2017, 4:22pm UTC](https://forums.fusetools.com/t/whilecount-not-working-properly/3899/4 "2017-03-03T16:22:50Z")

</div>

Thank you but with this way i cannot display half rate stars

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [March 3, 2017, 4:32pm UTC](https://forums.fusetools.com/t/whilecount-not-working-properly/3899/5 "2017-03-03T16:32:07Z")

</div>

Ah, I didn’t notice you had those.  
In that case you should just write a small javascript function which creates a string with whole and half stars based on the rating and then exposes that string as an observable,