Set dynamically a color, regarding an ID

User is a component which I created and category + profileColor are Properties of the component:

	<ScrollView>
		<StackPanel>
			<Each Items="{users}">
				<User category="{category}" profileColor="{getProfileColor}"/>
			</Each>
		</StackPanel>
	</ScrollView>

I would like to set the profileColor in respect of the category. So if the user is in category=1 then it should be red, and if he is in 2 then it should be blue for example. Every user in users has a “category” entry in the database.

getProfileColor looks like this:

function getProfileColor(args){
	console.log("category should be inside here: " + JSON.stringify(args.data));

		switch(args.data.category) 
		{
	    case 1:
	        return[1,1,1,1];
	        break;
	    case 2:
	        return[0,0,0,1];
	        break;
		}
 }
    
    module.exports = {

    getProfileColor: Observable(getProfileColor)

    };

But somehow it seems there are no arguments because I get:

 LOG: Name: TypeError
Error message: undefined is not an object (evaluating 'args.data')

Hi!

Sorry for the late reply.

What you are trying to do here doesn’t work. If you want to put a function in an Observable, that function can’t take an argument and it must return an Observable. I don’t think that is what you want in this case. You probably want to use Observable.map instead. Something like this:

var originalUsers = Observable(user1,user2,user3); //i'm assuming you create some users here
var users = originalUsers.map(function(u){
    u.color = getProfileColor(u);
    return u;
});

Then edit your getProfileColor function so it expects a user object and return a color.

In the above code, we map over the item in the original users list and add a color property to all the items based on the result of calling the getProfileColor function.

I hope this helps :slight_smile:

Works now :slight_smile: Thank you Kristian!!! :slight_smile: