Forum | Appery.io

I am trying to run some javascript on a listitem response to set the background color depending on a value of the response itself. But only the first item in the list accurately reflects the javascript.

Value is the current iteration of the list response ($[]), so I check the type response and when the match is detected I try to change the list element's attributes. What did I do wrong? I tried $(this) also.

if(value.type === "Type1"){
console.log($(element).find(Appery('headerImage')));
$(element).find(Appery('headerImage')).attr('src', 'files/views/assets/image/1.png');
$(element).find(Appery('itemHeader')).css('background-color', '#A0D0F7');
}
else if(value.type === "Type2"){
console.log($(element).find(Appery('headerImage')));
$(element).find(Appery('headerImage')).attr('src', 'files/views/assets/image/2.png');
$(element).find(Appery('itemHeader')).css('background-color', '#F7F4A0');
}
else if(value.type === "Type3"){
console.log($(element).find(Appery('headerImage')));
$(element).find(Appery('headerImage')).attr('src', 'files/views/assets/image/3.png');
$(element).find(Appery('itemHeader')).css('background-color', '#F2417F');
}
else if(value.type === "Type4"){
console.log($(element).find(Appery('headerImage')));
$(element).find(Appery('headerImage')).attr('src', 'files/views/assets/image/4.png');
$(element).find(Appery('itemHeader')).css('background-color', '#47F241');
}
else if(value.type === "Type5"){
console.log($(element).find(Appery('headerImage')));
$(element).find(Appery('headerImage')).attr('src', 'files/views/assets/image/5.png');
$(element).find(Appery('itemHeader')).css('background-color', '#41EFF2');
}

Got it. My solution involved not running javascript from the array ($[]), but pointing the value I want to check to the visibility field of to both the image and header components, respectively. Then. I used:

$(element).css(..., ...);
or
$(element).attr(..., ...);

and returned true because its the visibility property which is chill to do. I tried mapping the type string to the asset, but that was problematic because of the return statement expecting an encoded image.

Hello,

Thank you for the update. Let us know if you need any further help.

I actually would still value from learning how to do this.

When I create a mapping of a response to a list, I want to run javascript on this section. Now, the trick is that I want to assign values to the children of the list (the unique listitem) based on the results of the response (singleton JSON, unique per list item to be generated).

How do I target the individual component inside the element?

1] element.find(Appery('myItem')); doesn't work.
2] $(element).find(Appery('myItem')); doesn't work
3] var id = element.attr('id');
$('#'+id).find(Appery('myItem')); doesn't work

This would be great to allow users to customize the response mapping on the fly via the GUI mapping + the JS

Hi,

If I understand you correctly, you have a mobilelist containing other components. The list is generated by a service. Do you want to change it in mapping or on service success? Could you please post a screenshot from the editor with the mobilelist so we can see where you add code.

Katya,

I wanted to change it in the mapping. Basically, remove the need to map anything other than the topmost array of JSON elements to my components.

I actually figured this out:

var id = element.attr('id');
var stringArr = id.split("");
var page = stringArr[0];
$('#'+id).find('#'+page+'itemSize').text(value.Size);

This is kinda a hack, but the standard Appery('itemSize') doesn't work in the find jQuery selector because dsid is singleton which I think is screwing this up (it really shouldn't because it is a child of the unique ID).

Thanks tho

Hello!

Sorry, do you need further help?

Nope, the above code did the trick. Thank you for your concern