How to compare a sessionStorage item value with a backend parameter in embedded javascript file?

Question

I have a form which the user can fill and click a preview button (Preview will not save anything to database and will just create a view). I am implementing a "close preview" functionality which will take the user back to the filled form and give an option to finalize the inputs. I'm facing a problem with using the sessionStorage variable to populate back the drop down menu with whatever was filled earlier.

This is the drop down menu:

<label>State:</label><br>
<select required class="form-control" name="state" style="width:100%">
<option selected disabled value="">Select state</option>
<% _.each(states, function(state) { %>
<option value="<%= state.id %>" ><%= state.name %></option>
<% }) %>
</select>

I have stored the id of the state(What the user had filled in and previewed) as follows:

sessionStorage.setItem('propertyState', "<%= params['state'] %>");

The above stores the id of the selected drop down option.

While refilling the form, I need to check which dropdown item id matches the one stored in sessionStorage. sessionStorage is valid only inside <script>..</script> and params works only inside <%...%>. I'm not able to make a comparison between sessionStorage.getItem('propertyState') and state.id. Can someone guide me with this?

Answer 1

try to print states on the page, and then use this array in js.

var states = <%= states %>;
var stateToFind = sessionStorage.getItem('propertyState');
for(var i=0;i<states.length;i++){
 /** do staff**/
}

Answer 2

Thanks Alex. I did something like this. I don't know why I took so long to figure this out though:

<label>State:</label><br>
<select required id="propState" class="form-control" name="state" style="width:100%">
<option  disabled value="">Select state</option>
<% _.each(states, function(state) { %>
<option value="<%= state.id %>" ><%= state.name %></option>
<script>if((sessionStorage.getItem('propertyState')) == <%=(state.id)%>) {
        var selState = getElementById('propState');
        selState.value = <%= state.name %> ;
        }
</script>
<% }) %>
</select>