wie Struktur HTML von verschachtelten JSON

Question

erstellen Ich verwende JSON, um HTML-Vorlage zu erstellen, aber ich habe Probleme beim Erstellen von Struktur von JavaScript zu HTML. Dann habe ich meinen Code unten

$(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>

Mein erwartetes Ergebnis ist

<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> 

Wie kann ich die richtige Schleife Ergebnis wie diese zu haben?

Answer 1

Sie benötigen einige verschachtelte Schleifen, um auf das Element von der inneren Ebene zuzugreifen, und es wird geschehen.

Versuchen wie folgt aus:

$(document).ready(function() { 
 
    showList(); 
 
}); 
 

 

 
function showList() { 
 
    var myObj = { 
 
    "myresult": [{ 
 
     "A": [{ 
 
      "title": "this is title A1", 
 
      "konten": "this is konten A1", 
 
      "desc": "this is description A1" 
 
     }, 
 
     { 
 
      "title": "this is title A2", 
 
      "konten": "this is konten A2", 
 
      "desc": "this is description A2" 
 
     }, 
 
     { 
 
      "title": "this is title A3", 
 
      "konten": "this is konten A3", 
 
      "desc": "this is description A3" 
 
     }, 
 
     ], 
 
     "B": [{ 
 
      "title": "this is title B1", 
 
      "konten": "this is konten B1", 
 
      "desc": "this is description B1" 
 
     }, 
 
     { 
 
      "title": "this is title B2", 
 
      "konten": "this is konten B2", 
 
      "desc": "this is description B2" 
 
     }, 
 
     { 
 
      "title": "this is title B3", 
 
      "konten": "this is konten B3", 
 
      "desc": "this is description B3" 
 
     }, 
 
     ], 
 
     "C": [{ 
 
      "title": "this is title C1", 
 
      "konten": "this is konten C1", 
 
      "desc": "this is description C1" 
 
     }, 
 
     { 
 
      "title": "this is title C2", 
 
      "konten": "this is konten C2", 
 
      "desc": "this is description C2" 
 
     }, 
 
     { 
 
      "title": "this is title C3", 
 
      "konten": "this is konten C3", 
 
      "desc": "this is description C3" 
 
     }, 
 
     ] 
 
    }] 
 
    }; 
 
    $.each(myObj.myresult, function(index, obj) { 
 

 
    $.each(obj, function(idx, arr) { 
 
     var html = '<div class="alphabet">'; 
 
     html += "<h2>" + idx + "</h2>"; 
 
     $.each(arr, function(i, v) { 
 
     html += '<p>' + v.title + '</p>' 
 
     }); 
 
     html += "</div>"; 
 
     $('#result').append(html); 
 
    }); 
 

 

 
    }) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="result"> 
 
</div>