Javascript 如何使用jquery从JSON附加嵌套li

我想把json数据带到前端，如图所示。 我该怎么做，这是我的代码。我希望它像下面的图片一样嵌套

这就是我对代码的理解程度

HTML:

提前谢谢。

---

解决方案1

你可以试试这个代码

$.getJSON("active.json", function(result){
  var UniqueNames= $.unique(result.map(function (d) {
    return d.gpanel;
  }));
  var ul_block = $("<ul/>");
  $.each(UniqueNames, function(i) {
    $(ul_block).append('<li>' + UniqueNames[i] + '</li>');
  });
  $("#active").append(ul_block);
});

---

不确定这是否是完整的解决方案，而是$（“#active”）.html（“

”+UniqueNames+”

”）；行。。。你一遍又一遍地覆盖html，尝试使用.append而不是.htmli使用$（“#active”）.append（$（'

'）.html（UniqueNames[i]）；但问题是我需要在图片中添加嵌套的

。您需要创建嵌套的ul结构，以获得图像的结果。但是u是如何区分级别的（即减少的费用显示在第二级）？减少的费用是复选框值，在json中显示为（1,2,3）。i、 e 1表示定期，2表示降低费用，3表示有限保证。它随用户输入而变化，即如果用户仅选择2和3，则降低的费用将在顶部。好的，但更改1、测试、测试1234如何。这些数据在哪里可用？谢谢。但我的问题是如何创建嵌套列表？这就是我想知道的。我们现在刚到“
”，我想知道如何将“
• ”放在
  标签中。作为回报，形成一个嵌套列表。谢谢你的回答。我对jquery的每一个循环都很紧张。不过我还得研究你的代码。谢谢你指导我。

  <script>
     $.getJSON("active.json", function(result){
     $.each(result, function(i, field){
     var UniqueNames= $.unique(result.map(function (d) {
     return d.gpanel;
     }));
     $("#active").append('<li>'+UniqueNames[i]+'</li>');
     });
     });
  </script>
  

    [{"ID":"1","gpanel":"sfd","ptitle":"sdffd","panel":"1,2",
    "free":"yes","fees":"0.00"},
    {"ID":"2","gpanel":"sdfd","ptitle":"sdfds","panel":"1",
    "free":"yes","fees":"0.00"},
     {"ID":"3","gpanel":"sdf","ptitle":"sdf","panel":"1",
    "free":"yes","fees":"0.00"},
     {"ID":"4","gpanel":"sfd","ptitle":"fes","panel":"1",
    "free":"yes","fees":"0.00"},
    {"ID":"5","gpanel":"bbbfff","ptitle":"hgffg","panel":"1,2",
    "free":"yes","fees":"0.00"}
    ]
  

  $.getJSON("active.json", function(result){
    var UniqueNames= $.unique(result.map(function (d) {
      return d.gpanel;
    }));
    var ul_block = $("<ul/>");
    $.each(UniqueNames, function(i) {
      $(ul_block).append('<li>' + UniqueNames[i] + '</li>');
    });
    $("#active").append(ul_block);
  });
  

  $.getJSON("active.json", function(result) {
      var panel_arr = ["", "Regular", "Reduced Fee", "Limited Assurance"];
      var ul_block = $("<ul/>");
      $.each(result, function(i, data) {
          console.log(data);
          var panels = data.panel.split(",");
          var uli_block = $("<ul/>");
          $.each(panels, function(j, jdata){
              var ulii_block = $("<ul/>");
              $(ulii_block).append($("<li/>").text(data.ptitle));
              $(uli_block).append($("<li/>").text(panel_arr[panels[j]])).append(ulii_block);
          });
          $(ul_block).append($("<li/>").text(data.gpanel).append(uli_block));
      });
      $("#active").append(ul_block);
  });