How to pre-select dynamically created radio button based on json input via javascript

Question

In the below script, I am dynamically creating radio-buttons (green/yellow/red) as status next to some categories.

Categories and status (1-green, 2-yellow, 3-red) will both be received via json objects. My aim is to display current status as pre-selected radio button. eg: In the below form say {"category":"System Availability","status":"1"} indicates that System Availability status is 1 that means Green, how can I select Green button pre-selected? If it comes as 0, nothing should be selected.

Here is the running-code that doesn't have any functionality of pre-selecting radio button based on json input. At the end, my aim is to update the database back via json.

Thanks for your time, in attempting to help!

  $(document).ready(function() { var appStatus = [{ "category": "Overall Status", "status": "0" }, { "category": "System Availability", "status": "1" }, { "category": "Whatever", "status": "2" }]; var tr; for (var i = 0; i < appStatus.length; i++) { tr = $('<tr/>'); tr.append("<td>" + appStatus[i].category + "</td>"); tr.append('<tr id="row' + i + '"><td><input type="radio" name="inlineRadioOptions_' + i + '[]" value="1" id="inlineRadio1"><font color="green">Green &emsp;</font><label class="radio-inline"><input type="radio" name="inlineRadioOptions_' + i + '[]" id="inlineRadio2" value="2"><font color="yellow">Yellow &emsp;</font></label><label class="radio-inline"><input type="radio" name="inlineRadioOptions_' + i + '[]" id="inlineRadio3" value="3"> <font color="red">Red</font></label><td></tr>'); $('table').append(tr); } $('#result').on('click', function() { var new_status = []; $('.table tbody tr').each(function() { new_status.push({ category: $(this).find('td:eq(0)').text(), status: $(this).find(':radio:checked').val() }); }); console.log(new_status); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table table-hover"><thead> <th>Category</th> <th>Status</th> </thead> </table> 

Answer 1

I may be oversimplifying this, but if you want to preselect a radio button, just alter the HTML you're appending so that the <input> is rendered with a checked attribute when it should be selected:

 $(document).ready(function() { var appStatus = [{ "category": "Overall Status", "status": "0" }, { "category": "System Availability", "status": "1" }, { "category": "Whatever", "status": "2" }]; var tr; for (var i = 0; i < appStatus.length; i++) { tr = $('<tr/>'); tr.append("<td>" + appStatus[i].category + "</td>"); tr.append('<tr id="row' + i + '"><td><input type="radio" name="inlineRadioOptions_' + i + '[]" value="1" id="inlineRadio1"' + (appStatus[i].status == '1' ? ' checked="checked"' : '') + '><font color="green">Green &emsp;</font><label class="radio-inline"><input type="radio" name="inlineRadioOptions_' + i + '[]" id="inlineRadio2" value="2"' + (appStatus[i].status == '2' ? ' checked="checked"' : '') + '><font color="yellow">Yellow &emsp;</font></label><label class="radio-inline"><input type="radio" name="inlineRadioOptions_' + i + '[]" id="inlineRadio3" value="3"' + (appStatus[i].status == '3' ? ' checked="checked"' : '') + '> <font color="red">Red</font></label><td></tr>'); $('table').append(tr); } $('#result').on('click', function() { var new_status = []; $('.table tbody tr').each(function() { new_status.push({ category: $(this).find('td:eq(0)').text(), status: $(this).find(':radio:checked').val() }); }); console.log(new_status); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table table-hover"><thead> <th>Category</th> <th>Status</th> </thead> </table>