私はこのJSONをバックエンドから受け取っています。 JSONは、私は以下に示すようにJSONを解析することができる午前私は、次のHTMLJSONレスポンスから以下のHTMLを動的に構築する方法
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption"><span class="caption-subject font-green sbold uppercase">Lion</span></div>
<div class="actions"><a href="#" class="btn btn-sm btn-danger"><i class="icon-pencil"></i> Delete</a></div>
</div>
<div class="portlet-body" style="padding-top:0px;">
<div class="tags-body videolist-tags-body">
<table class="table">
<tbody>
<tr>
<td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox">Herbivorous <span></span></label></td>
<td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox">Omnivorous<span></span></label></td>
</tr>
</tbody>
</table>
</div>
<div class="timerContainer">
<table class="table">
<tr>
<th width="14%"></th>
<th width="28.6%" align="left">Food</th>
<th width="28.6%" align="left">Lives</th>
<th width="28.6%" align="left">Threats</th>
</tr>
<tr>
<td style="padding:0px;">A</td>
<td><input type="text" name="PAC Name" data-required="1" class="form-control"></td>
<td><input type="text" name="PAC Name" data-required="1" class="form-control"></td>
<td><input type="text" name="PAC Name" data-required="1" class="form-control"></td>
</tr>
<tr>
<td style="padding:0px;">B</td>
<td><input type="text" name="PAC Name" data-required="1" class="form-control"></td>
<td><input type="text" name="PAC Name" data-required="1" class="form-control"></td>
<td><input type="text" name="PAC Name" data-required="1" class="form-control"></td>
</tr>
<tr>
<td style="padding:0px;">C</td>
<td><input type="text" name="PAC Name" data-required="1" class="form-control"></td>
<td><input type="text" name="PAC Name" data-required="1" class="form-control"></td>
<td><input type="text" name="PAC Name" data-required="1" class="form-control"></td>
</tr>
</table>
<br>
<button type="submit" class="btn btn-success" style="margin-left:92px;">Submit</button>
</div>
</div>
</div>
を作成しようとしています上記のJSONの各要素についての二つの要素
{
"animal_Details": [{
"animal_id": "4",
"animal_name": "Lion",
"Tag_Details": [{
"Tag_name": "Herbivorous"
}, {
"Tag_name": "Omnivorous"
}],
"Level_Details": [{
"level_id": "Food",
"animal_timer": "12",
"animal_reps": "0",
"animal_points": "0"
}, {
"level_id": "Lives",
"animal_timer": "0",
"animal_reps": "20",
"animal_points": "70"
}, {
"level_id": "Threats",
"animal_timer": "0",
"animal_reps": "0",
"animal_points": "0"
}]
}, {
"animal_id": "6",
"animal_name": "Hen",
"Tag_Details": [{
"Tag_name": "Carnivorous"
}, {
"Tag_name": "Herbivorous"
}, {
"Tag_name": "Omnivorous"
}],
"Level_Details": [{
"level_id": "Food",
"animal_timer": "0",
"animal_reps": "3",
"animal_points": "15"
}, {
"level_id": "Lives",
"animal_timer": "0",
"animal_reps": "0",
"animal_points": "0"
}, {
"level_id": "Threats",
"animal_timer": "0",
"animal_reps": "0",
"animal_points": "0"
}]
}]
}
の配列ですが、私あなたは私が動的にHTML
を構築する方法を教えてくださいでし必要なHTMLvar valuesfromjson = json.animal_Details;
for (var i = 0; i < valuesfromjson.length; i++) {
var animal_id = valuesfromjson[i].animal_id;
var animal_name = valuesfromjson[i].animal_name;
var animaltagsinnerarray = valuesfromjson[i].Tag_Details;
var leveldetailsinnerarray = valuesfromjson[i].Level_Details;
console.log('animaltagsinnerarray ' +JSON.stringify(animaltagsinnerarray));
console.log('leveldetailsinnerarray ' +JSON.stringify(leveldetailsinnerarray));
}
を構築することができません
http://jsfiddle.net/cod7ceho/195/
おそらく、サーバー上のHTML(実際のテンプレートエンジンを使用して)を生成し、その代わりにJSONを返す方が良いでしょうに役立ちます願っています。 –