0
私はJSONを使ってHTMLテンプレートを作成していますが、javascriptからhtmlへの構造体の作成に問題があります。それから私は私の期待した結果がこのような結果を持っているどのように私は適切なループでき入れ子になったjsonから構造体htmlを作成する方法
<div id="result">
<div class="alphabet">
<h2>A</h2>
<p>this is title A1</p>
<p>this is title A2</p>
<p>this is title A3</p>
</div>
<div class="alphabet">
<h2>B</h2>
<p>this is title B1</p>
<p>this is title B2</p>
<p>this is title B3</p>
</div>
<div class="alphabet">
<h2>C</h2>
<p>this is title C1</p>
<p>this is title C2</p>
<p>this is title C3</p>
</div>
</div>
$(document).ready(function(){
showList();
});
function showList(){
var myObj = {
"myresult" : [
{
"A" : [
{
"title" \t \t : \t "this is title A1",
"konten" \t : \t "this is konten A1",
"desc" \t \t : \t "this is description A1"
},
{
"title" \t \t : \t "this is title A2",
"konten" \t : \t "this is konten A2",
"desc" \t \t : \t "this is description A2"
},
{
"title" \t \t : \t "this is title A3",
"konten" \t : \t "this is konten A3",
"desc" \t \t : \t "this is description A3"
},
],
"B" : [
{
"title" \t \t : \t "this is title B1",
"konten" \t : \t "this is konten B1",
"desc" \t \t : \t "this is description B1"
},
{
"title" \t \t : \t "this is title B2",
"konten" \t : \t "this is konten B2",
"desc" \t \t : \t "this is description B2"
},
{
"title" \t \t : \t "this is title B3",
"konten" \t : \t "this is konten B3",
"desc" \t \t : \t "this is description B3"
},
],
"C" : [
{
"title" \t \t : \t "this is title C1",
"konten" \t : \t "this is konten C1",
"desc" \t \t : \t "this is description C1"
},
{
"title" \t \t : \t "this is title C2",
"konten" \t : \t "this is konten C2",
"desc" \t \t : \t "this is description C2"
},
{
"title" \t \t : \t "this is title C3",
"konten" \t : \t "this is konten C3",
"desc" \t \t : \t "this is description C3"
},
]
}
]
}
$.each(myObj, function(data){
$.each(this, function(index, obj){
$.each(obj, function(key, val){
listRes(key);
});
$.each(obj.A, function(key, val){
listRes(val.title);
});
$.each(obj.B, function(key, val){
listRes(val.title);
});
$.each(obj.C, function(key, val){
listRes(val.title);
});
});
});
function listRes(title){
var p = '<p>'+title+'</p>';
var h2 = '<h2>'+title+'</h2>';
var alpha = $('<div class="alphabet">' + h2 + p +'</div>');
$('#result').append(alpha);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='result'>
</div>
以下の私のコードですがありますか?
、私はどのようにJavaScriptでループHTML構造をし混乱します。今私はあなたの答えから良い説明をしています。説明に感謝します。 – rnDesto
あなたは歓迎です:) –