如何从嵌套的 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>