# Alternating colors inside \<Each Items\>

**URL:** <https://forums.fusetools.com/t/alternating-colors-inside-each-items/5237>\
**Category:** How-to Discussions\
**Created:** [January 25, 2016, 7:59am UTC](https://forums.fusetools.com/t/alternating-colors-inside-each-items/5237 "2016-01-25T07:59:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![oskar](https://avatars.discourse-cdn.com/v4/letter/o/f07891/32.png) [@oskar](https://forums.fusetools.com/u/oskar)\
**Post date:** [January 25, 2016, 7:59am UTC](https://forums.fusetools.com/t/alternating-colors-inside-each-items/5237/1 "2016-01-25T07:59:15Z")

</div>

Hello, I’m trying to add an alternate background color in a list of elements, but can’t find the way of doing it… this is what I have:

```auto
<Each Items="{topArtists.top_domestic}">
    <ArtistItem Background="{alternateColor}">
          <Tapped>
                <Set rootNav.Active="ticketList"/>
            </Tapped>
    </ArtistItem>
</Each>

```

Tried a function called “alternateColor” to cycle between two colors, but no success…

ArtistItem is the one whose background want to cycle.

Any ideas?

---

<div class="post-metadata">

**Author:** ![Costin\_Bereveanu](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/costin_bereveanu/32/628_2.png) [@Costin\_Bereveanu](https://forums.fusetools.com/u/Costin_Bereveanu)\
**Post date:** [January 25, 2016, 8:26am UTC](https://forums.fusetools.com/t/alternating-colors-inside-each-items/5237/2 "2016-01-25T08:26:22Z")

</div>

You could assign a sequential index var to each top\_domestic in JS, then in an alternateColor function (which lives on top\_domestic) you can mod that to 2 and return alternate colors.

---

<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:** [January 25, 2016, 9:04am UTC](https://forums.fusetools.com/t/alternating-colors-inside-each-items/5237/3 "2016-01-25T09:04:25Z")

</div>

Hi!

If you Observable.map over your items, then second argument the function accepts is the index of the item. You can then do as suggested above:

```auto
<App Theme="Basic">
    <Panel>
        <JavaScript>
            var Observable = require("FuseJS/Observable");

            var items = Observable("item1", "item2", "item3",
                                   "item4","item5","item6","item7",
                                   "item8","item9","item10");

            var viewItems = items.map(function(item, index){
                return { text:item, color: (index % 2 == 0) ? [1,0,0,1] : [0,1,1,1] };
            });

            module.exports = {
                viewItems: viewItems
            };
        </JavaScript>
        <ScrollView>
            <StackPanel>
                <Each Items="{viewItems}">
                    <Rectangle Fill="{color}" Height="60">
                        <Text Value="{text}" />
                    </Rectangle>
                </Each>
            </StackPanel>
        </ScrollView>
    </Panel>
</App>

```

Here i’m just assigning a color based on the mod(2) result.

---

<div class="post-metadata">

**Author:** ![oskar](https://avatars.discourse-cdn.com/v4/letter/o/f07891/32.png) [@oskar](https://forums.fusetools.com/u/oskar)\
**Post date:** [January 26, 2016, 6:57am UTC](https://forums.fusetools.com/t/alternating-colors-inside-each-items/5237/4 "2016-01-26T06:57:07Z")

</div>

Works great, thank you both! (still getting used to fusetooling!)