Repeat HTML elements dynamically (through JavaScript)

[JeCom]

Is there a way I can repeat HTML elements dynamically? I'd like to create rectangles next to each other with different metrics (different height e.g.). So ideally I'd like to use JavaScript to add rect elements in a loop. The number of rectangles could differ and after creating the elements I'd like to dynamically calculate metrics to manipulate the rectangles. Is there a way of doing this? 

Also it would be nice to know the version of JavaScript (/EcmaScript) Fitbit uses as well as the HTML version. This way I could search for more specific solutions myself based on the version number.

[Mark-D · Accepted solution]

You cannot dynamically add elements from JavaScript, but there is a way to get the same behaviour as you are looking for.

The way I'd go about this is to create a fixed number of rect elements, each with their own unique id and then hide the elements you don't need at runtime from JavaScript.

For example, if your maximum number of rectangles was 10, then create 10 rect elements and give each a unique id of "rect1", "rect2" up to "rect10". Then in the JavaScript hide the rect elements you don't need by setting their 'display' attribute to "none". So if you wanted to show 4 rects, set the 'display' attribute to "inline" for rect1, rect2, rect3 and rect4. For all other rects, set their 'display' property to 'none'.

You can also individually set the visible rect's 'x' and 'width' attributes to their calculated values.

I know it's not pretty, but it's about as close as you can currently get without being able to dynamically add/remove elements.

[JeCom]

I found that Fitbit uses ES5.1: "The device itself supports ES5.1, but the companion isn't as restricted." 
I'd still like to know how I could dynamically make repeated HTML elements from JavaScript and what version of HTML the Fitbit supports.

[JeCom]

That does seem as a solution to have a dynamic number. If it would mean to not repeat that in my index.GUI would be even greater but I can start from here, thanks! 🙂

[Mark-D]

Being able to add/remove elements dynamically is something that's been requested a few times as far as I have read, so it might be added at some point in the future if we're lucky.

[JeCom]

Alright, I'll take a look at feature requests then and I'm gonna move my question for the version of HTML to a new one since it's not that relevant. Thanks again!

[Florian87]

Probably you could also use the Virtual Tile List Component. A lot of examples were given in this forum. From a predefined pool of tiles, its possible to create dynamical tile items. Those could possibly used as bar charts. Just put everything in a g-container with a transform attribute... rotate the container for a horizontal alignment and adjust the tile height in the list‘s delegate. Without any engagement related to performance 😁

[Gondwana]

Fitbit devices don't use HTML at all. The declarative language is based on SVG. However, I think it's safest not to think of it as any particular official SVG version or standard, but to rely on Fitbit's documentation as the complete definition of the language.

The same applies to Fitbit's implementation of Javascript. Expectations that it's a complete and standard implementation often lead to tears; accepting that it is what it's documented to be is a path of less resistance. 🙂

Prior knowledge of SVG and Javascript are benefits, but we must be prepared to learn new tricks.

[Gondwana]

@Florian87That's brilliant! I'm going to try that!