Passing information from the back-end to the front-end

One of the things I found difficult to do when starting out was finding out how I could manipulate the DOM based on back-end variables. This is where the data attribute comes in handy.

Say you have a website where you have a list of items and you want to sort them by ascending or descending price, but you don't want to have the website reloaded or use backend resources, what would you do?

One method I used was to pass the price of each piece of information as a data attribute while rendering the page, like so:

<div class="card-trip" data-price="800.0">...</div>
<div class="card-trip" data-price="850.0">...</div>
<div class="card-trip" data-price="500.0">...</div>

These data attributes are populated in the back end by simply accessing the price from params (in this case sauna) within Rails:

<div class="card-trip" data-price="<%= sauna.price %>">...</div>

There you have it, you now have a way to access data from the back-end, in the front-end.