# Change color depending on  it is odd or even 

**URL:** <https://forums.fusetools.com/t/change-color-depending-on-it-is-odd-or-even/4084>\
**Category:** How-to Discussions\
**Created:** [October 7, 2015, 10:28pm UTC](https://forums.fusetools.com/t/change-color-depending-on-it-is-odd-or-even/4084 "2015-10-07T22:28:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cristian\_Karmy1](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cristian_karmy1/32/480_2.png) [@Cristian\_Karmy1](https://forums.fusetools.com/u/Cristian_Karmy1)\
**Post date:** [October 7, 2015, 10:28pm UTC](https://forums.fusetools.com/t/change-color-depending-on-it-is-odd-or-even/4084/1 "2015-10-07T22:28:32Z")

</div>

Can a list of each change some value as the background color depending on whether it is odd or even?

Like (but the number of element depend of a Database): ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/svLZb46rOcCA-legacy-files-c2qfXbz9pQjXmmvI-t7-LD3vRlMhjEbrFK4ZX_HGw.png)

Thanks!

---

<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:** [October 7, 2015, 10:51pm UTC](https://forums.fusetools.com/t/change-color-depending-on-it-is-odd-or-even/4084/2 "2015-10-07T22:51:35Z")

</div>

At the moment, we don’t support this kind of thing out-of-the-box. One way to do it might be to decorate your original data before it gets to the view in markup. For example:

```auto
var items = []; // Some array of items
for (var i = 0; i < items.length; i++) {
    items[i].colorScheme = (i % 1) == 0 ? "dark" : "light";
}

```

Then this `colorScheme` field could be used with something like `Match`/`Case` in UX to get the appropriate look:

```auto
<Match Value="{colorScheme}">
    <Case String="dark">
        <!-- Show dark item -->
    </Case>
    <Case String="light">
        <!-- Show light item -->
    </Case>
</Match>

```

I understand that the `for`-loop approach is a bit sub-par though; I’ve made a ticket internally that proposes to add a `mapi` function to `Observable` that would work similarly to `map`, but the mapping function would as input also take the index of the item being mapped. With that, you could do it like this:

```auto
var items = new Observable(...); // Same as items before, but this time it's an Observable
var groupItems = items.mapi(function(index, item) {
    // Ideally you would actually clone item here, but I didn't in this example for simplicity
    var newItem = item;
    newItem.colorScheme = (index % 1) == 0 ? "dark" : "light";
    return newItem;
});

```

This `mapi` will probably go in, and I can let you know when it does; it may not though. Either way we should have an elegant way to handle these kinds of cases.

---

<div class="post-metadata">

**Author:** ![Cristian\_Karmy1](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cristian_karmy1/32/480_2.png) [@Cristian\_Karmy1](https://forums.fusetools.com/u/Cristian_Karmy1)\
**Post date:** [October 8, 2015, 12:34pm UTC](https://forums.fusetools.com/t/change-color-depending-on-it-is-odd-or-even/4084/3 "2015-10-08T12:34:09Z")

</div>

Great! Thanks for the example. This could work fine to my purpose.

Will be very usseful to have a mapi function!

---

<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:** [October 8, 2015, 7:21pm UTC](https://forums.fusetools.com/t/change-color-depending-on-it-is-odd-or-even/4084/4 "2015-10-08T19:21:32Z")

</div>

After discussing it more internally we’re going with just extending the existing `map` function to also be able to take a function that expects both the item and the index. I’ve made a ticket internally for adding this. I’ll let you know when it’s ready 🙂

---

<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:** [October 16, 2015, 2:52am UTC](https://forums.fusetools.com/t/change-color-depending-on-it-is-odd-or-even/4084/5 "2015-10-16T02:52:28Z")

</div>

It looks like this new form of `map` is going to be in the next release 🙂