이 JSON을 백엔드에서받습니다. JSON 두 요소 i가 아래와 같이JSON 응답에서 동적으로 다음 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 파싱 할 오전 따라 HTML을 생성하는 것을 시도하고 상기 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
을 구성하는 방법을 알려 주시기 바랍니다 수 필요한 HTML
var 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을 반환하는 더 좋을 것이다 도움이되기를 바랍니다. –