This is the JSON that is returned from my PHP
{
"17":{"answer_id":"17","answer":"You earn a salary","is_correct":"N"},
"18":{"answer_id":"18","answer":"You earn profit","is_correct":"N"},
"19":{"answer_id":"19","answer":"You invest money","is_correct":"N"},
"20":{"answer_id":"20","answer":"All of the above.","is_correct":"Y"}
}
So I basically need to loop through this and display them as radio button options. But I'm stuck - I checked out this solution jQuery $.each loop and json data
But that is just one array and also the other issue I have is with the key being a number.
Any help will be appreciated
Thanks
asked May 4, 2012 at 14:12
3 Answers 3
var ret = {
"17":{"answer_id":"17","answer":"You earn a salary","is_correct":"N"},
"18":{"answer_id":"18","answer":"You earn profit","is_correct":"N"},
"19":{"answer_id":"19","answer":"You invest money","is_correct":"N"},
"20":{"answer_id":"20","answer":"All of the above.","is_correct":"Y"}
};
$.each(ret, function(key, value) {
var radio_with_label = $('<label for="'+ value.answer_id +'">'+ value.answer +'</label><input name="'+ key +'" id="'+ value.answer_id +'" type="radio" value="'+ value.is_correct+'">');
$(TARGET).append(radio_with_label); // TARGET -> any valid selector container to radios
});
answered May 4, 2012 at 14:17
Sign up to request clarification or add additional context in comments.
3 Comments
Gublooo
Thank you for the quick response - worked perfectly :) - I had spent 2 hours figuring that out
daniel0mullins
Be careful here, as you will be generating
ids that begin with a number, which is not technically allowed (although for most browsers it works just fine, except IE of course). You may wish to prepend some character data: 'id_', that will give you valid markup.Gublooo
Thanks Daniel - I did prepend answerid_ - but thanks for pointing out
var data = {
"17": {
"answer_id": "17",
"answer": "You earn a salary",
"is_correct": "N"
},
"18": {
"answer_id": "18",
"answer": "You earn profit",
"is_correct": "N"
},
"19": {
"answer_id": "19",
"answer": "You invest money",
"is_correct": "N"
},
"20": {
"answer_id": "20",
"answer": "All of the above.",
"is_correct": "Y"
}
}
$.each(data, function(key, value) {
$('#content').append('<input id="rad-'+key+'" type="radio" name="contnet" value="'+key+'"><label for="rad-'+key+'">'+value.answer+'</label><br>');
});
answered May 4, 2012 at 14:28
2 Comments
ilyes kooli
here I don't care about the is_correct value, because is not clear what you want to de with it.
Gublooo
Thanks for the demo - the first solution worked - so accepted that answer. Thanks for the time
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = {
"17": { "answer_id": "17", "answer": "You earn a salary", "is_correct": "N" },
"18": { "answer_id": "18", "answer": "You earn profit", "is_correct": "N" },
"19": { "answer_id": "19", "answer": "You invest money", "is_correct": "N" },
"20": { "answer_id": "20", "answer": "All of the above.", "is_correct": "Y" }
};
$.each(data, function (i, entity) {
$('#radioButtonList').append($('<input />', { 'type': 'radio', 'name': 'answerRadioButtonList', 'id': entity.answer_id, 'value': entity.is_correct })).append(entity.answer + '<br />');
});
$('#radioButtonList').find(':radio').live('click', function () {
if ($(this).val() === 'Y') {
alert('Correct Answre.');
}
});
});
</script>
</head>
<body>
<div id="radioButtonList">
</div>
</body>
</html>
answered May 4, 2012 at 14:30
1 Comment
Gublooo
Thanks for the answer - and for creating the demo - appreciate your time - I've given you an up vote - but accepted the first answer as that worked too - Thanks again
lang-js
$('#target_element').load()instead.