Adding html to html component that is mapped to a service

[Nick B]

Hi,

I have a value from a database (a numerical score) that I need to add to a span element to show a specific star rating with a sprite:
span class="rating-static rating-25"/span

When mapping the score to a html component i have in a list item, I'd like the html component to contain the following code:
span class="rating-static rating-\" + value + \"" //value being the score.

However I only seem to get the numerical value when testing the app (i.e. it just shows 25 and none of span html.

Any suggestions how to do this?

Thanks/span

[Nick B]

Sorry, html went missing. Span would look like:
"span class="rating-static rating-25"/span"

[Nick B]

span class="rating-static rating-25"</span

[Nick B]

Sorry, html went missing. The span would look something like this:
span class="rating-static rating-25"</span

[Kateryna Grynko]

Hi Nick,

Glad you solved it. Let us know if you need any help.

[Nick B]

Hi Katya,

Didn't manage to solve it yet unfortunately.

My problem is that only the first listitem contains the span html. The other listitems do not have it but the labels are there. How do I add this span html to every generated listitem?

I attached a screenshot to show exactly what I mean. I am populating a list with entries from a db. Each listitem contains a label and should have a piece of html where there is a span for the star rating sprite. The class of this sprite is dynamically generated (depending on what the score is of the entry) so it looks something like
"Appery('html_rating').html('span class='rating-static rating-" + value.Rating + "'

[Yurii Orishchuk]

Hi Nick,

I don't see where did you use this code.

But if you use your code in "AddJS" for the list item you can use following code:

pre

var currentElement = jQuery(element)&#46;closest("&#46;ui-listview");

var currentLabel = currentElement&#46;find('[name="html_rating"]');

&#47;&#47;Using currentLabel&#46;&#46;
currentLabel&#46;html("&#46;here is html you need&#46;");

/pre

Regards.

[Nick B]

Thanks for the help Yurri.

I managed to solve it by adding a simple label to the listitem and then editing the JS in the mapping section with the following:
codevar x = value&#46;Rating;
var y = "rating-static rating-" + String(x);
$(element)&#46;find('#results_label_rating')&#46;append("<span class='" + y + "'></span>");
/code

That got my needed html for the star rating into each listitem.

[Evgene Karachevtsev]

Hello Nick,

Thank you for the update. Do not hesitate to contact us if you need any further help.