I'm using getJSON to retrieve information from a record and the corresponding detail records and display the detail records in a div id="questions". The PHP script that is called returns a JSON string (via json_encode) that looks like this:
{
"content": {
"1": {
"quadrant": "Balance",
"text": "1. Meditative or prayerful activity today?",
"answers": [
{
"answer_id": "4",
"text": "None",
"score_value": "1"
},
{
"answer_id": "5",
"text": "Few",
"score_value": "2"
},
{
"answer_id": "6",
"text": "Lots",
"score_value": "3"
}
]
},
"2": {
"quadrant": "Activity",
"text": "3. How much exercise (min.)?",
"answers": [
{
"answer_id": "1",
"text": "<15",
"score_value": "1"
},
{
"answer_id": "2",
"text": "15-30",
"score_value": "2"
},
{
"answer_id": "3",
"text": "30+",
"score_value": "3"
}
]
}
}
}
I have used getJSON as,
<script type="text/javascript">
$.getJSON('questions.php?callback=?', function (data) {
$("#questions").html('');
$.each(data.content, function (i, item) {
$.each(item, function(index, obj){
$("#questions").append('<div class="cont"><p>'+ obj.text +'</p></div><hr width="100%" style="color:#fff" />');
})
});
});
</script>
We must display the HTML div like below,
<div class="cont">
<p>1. Meditative or prayerful activity today?</p>
<fieldset class="ui-grid-b">
<div class="ui-block-a"><label>
<input name="checkbox-0" type="checkbox">NONE
</label></div>
<div class="ui-block-b"><label>
<input name="checkbox-0" type="checkbox">FEW
</label></div>
<div class="ui-block-c"><label>
<input name="checkbox-0" type="checkbox">LOTS
</label></div>
</fieldset>
</div>
<hr width="100%" style="color:#fff" />
<div class="cont">
<p>2. how was your atress level?</p>
<fieldset class="ui-grid-b">
<div class="ui-block-a" style="width: 31%"><label>
<input name="checkbox-0" type="checkbox">HIGH
</label></div>
<div class="ui-block-b" style="width: 37%"><label>
<input name="checkbox-0" type="checkbox">MEDIUM
</label></div>
<div class="ui-block-c" style="width: 30%"><label>
<input name="checkbox-0" type="checkbox">LOW
</label></div>
</fieldset>
</div>
<hr width="100%" style="color:#fff" />
My problem comes in the getJSON section where I'm trying to populate the table with a record. I don't know how to refer to the different fields in array 'content'. I've tried many variations.
How do I refer to a nested field in a multidimensional array like this?