如何從嵌套的json創建結構html

Question

我正在使用JSON創建HTML模板，但是在創建從javascript到html的結構時遇到了問題。 然后我的代碼在下面

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

我的預期結果是

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

我怎樣才能適當地循環以獲得這樣的結果？

Answer 1

您需要一些嵌套循環才能從內部級別訪問元素，這將完成。

嘗試這樣：

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