Setting Javascript Variable within a Javascript Variable

I hope this makes sense to someone. Not even sure this is possible so that's why I'm posting a question here.
I'm returning the data in Fetched Data using the Fetch shown in Fetching the Data. I'm dynamically building a Radio Button from the Fetched Data as shown in Fetching the Data for the Form.
"radioDecision += <input type="radio" id="decision" name="decision" class="form-check-input" value="${value.CODE}" required> ${value.DESCRIPTION}<br/>
"
Within Javascript Varibles and HTML Form Elements you can see that I'm setting ${decision_selection_1} so it's checked if "decision" has a value of "N". It actually could be "N" or "Y" but I set it to "N" for this example.
<input type="radio" id="decision" name="decision" class="form-check-input" value="N" ${decision_selection_1} required>
<input type="radio" id="decision" name="decision" class="form-check-input" value="Y" ${decision_selection_2} required>
My question: How can I set ${decision_selection_1} or ${decision_selection_2} to show "checked" if "decision" has been set to "N" or "Y" after the Radio Button has been dynamically created?
The variable "decision" is being set after the Fetch statement builds the radio buttons. In Radio Buttons after Fetch, one of the Radio Buttons should be "checked" if "decision" has been set to "N" or "Y".
Fetched Data:
[
{
"ROW_NUMBER": 1,
"DATA_CODE": "Decision",
"CODE": "N",
"DESCRIPTION": "Reviewed Comment, No Response Required"
},
{
"ROW_NUMBER": 2,
"DATA_CODE": "Decision",
"CODE": "Y",
"DESCRIPTION": "Response Entered Below"
}
]
Fetching the Data:
let radioDecision;
fetch('URL', options)
.then(response => response.json())
.then(data => {
Object.entries(data).forEach(([key, value]) => {
radioDecision += `<input type="radio" id="decision" name="decision" class="form-check-input" value="${value.CODE}" required> ${value.DESCRIPTION}<br/>`
});
})
.catch((error) => {
toastr["error"]("Something went wrong.", "Error");
});
Javascript Varibles and HTML Form Elements
let decision_selection_1;
let decision_selection_2;
decision = 'N';
decision_selection_1 = decision == "N" ? "checked" : "";
decision_selection_2 = decision == "Y" ? "checked" : "";
<div class="form-check">
<input type="radio" id="decision" name="decision" class="form-check-input" value="N" ${decision_selection_1} required>
Review Comment, No Response Required
</div>
<div class="form-check">
<input type="radio" id="decision" name="decision" class="form-check-input" value="Y" ${decision_selection_2} required>
Response Entered Below
<div class="valid-feedback">Completed!</div>
<div class="invalid-feedback">Please make a selection.</div>
</div>
View Source:
<div class="form-check">
<input type="radio" id="decision" name="decision" class="form-check-input" value="N" checked required=""> Reviewed Comment, No Response Required
<br>
<input type="radio" id="decision" name="decision" class="form-check-input" value="Y" required=""> Response Entered Below<br>
<div class="valid-feedback">Completed!</div>
<div class="invalid-feedback">Please make a selection.</div>
</div>
Radio Buttons after Fetch
<div class="form-check">
${radioDecision}
<div class="valid-feedback">Completed!</div>
<div class="invalid-feedback">Please make a selection.</div>
</div>
View Source:
<div class="form-check">
<input type="radio" id="decision" name="decision" class="form-check-input" value="N" required=""> Reviewed Comment, No Response Required
<br>
<input type="radio" id="decision" name="decision" class="form-check-input" value="Y" required=""> Response Entered Below<br>
<div class="valid-feedback">Completed!</div>
<div class="invalid-feedback">Please make a selection.</div>
</div>
Answer
To dynamically set the checked radio button after the radio buttons are created you need to append the html to the dom. Because the decision_selection_1 and the decision_selection_2 are set before the fecthing i think this is the issue that's bloking the fetch.
Enjoyed this article?
Check out more content on our blog or follow us on social media.
Browse more articles