将嵌套的JSON对象转换为Accordion格式

Question

我一直在尝试将嵌套的JSON对象转换为jquery ACCORDION工作的格式。我经历了很多链接，但找不到合适的解决方案。这就是我的JSON的样子：

{
  "A": {
    "id": "0",
    "B": {
      "id": "1"
    },
    "C": {
      "id": "2"
    },
    "D": {
      "id": "3"
    }
  }
}

注意：“B”或“C”或“D”也可以进一步嵌套，导致嵌套的Accordion格式。

我尝试了很多方法，但结果并不是我所期望的。任何人都可以帮助我。

这是我的方法之一，不起作用：

function MakeAccordion(obj) {
    var json = '<div class="accordion">';
    for (var key in obj) {
        if (typeof obj[key] == "object")
           json  = json + MakeAccordion(obj[key]);

        if (typeof obj[key] != "object")
          json = "<h3>" + json + " = " + obj[key] + "</h3>";

       else
          json = json + "</h3>";
    }
    return json + "</div>";
  }

预期产出：

<div class="accordion">
  <h3>A</h3>
  <div class="accordion">
    <h3>B</h3>
    <div>id = 0</div>

    <h3>C</h3>
    <div>id = 1</div>

    <h3>D</h3>
    <div>id = 2</div>
  </div>
</div>

我的输出：

<div class="accordion">
    <div class="accordion">
        <h3>= 0</h3>
    </div>
    <div class="accordion">
        <h3>= 1</h3>
    </div>
</div>
<div class="accordion">
    <h3>= 2</h3>
</div>
<div class="accordion">
    <h3>= 3</h3>
</div>

Answer 1

当你标记jquery时，你可以使用$.each() ......就像这样

var Json = {
            "A": {
                "id": "0",
                "B": {
                    "id": "1",
                    "K" : {
                      "id" : "5"
                    }
                },
                "C": {
                    "id": "2"
                },
                "D": {
                    "id": "3"
                }
            }
        };

// run a function
MakeAccordion(Json);

// MakeAccordion function
function MakeAccordion(obj) {
  var HTML = '<div class="accordion">'
      HTML += MainAccordion(obj);
      HTML += '</div>';
   $('body').append(HTML);
}

// MainAccordion function 
function MainAccordion(Main){
  var HTML = '';
  $.each(Main , function(key1 , value1){
      console.log(ObjLength(value1));
      HTML += '<h3>'+ key1 +'</h3>';
      HTML += '<div class="accordion">';
      HTML +=  LastAccordion(value1);
      HTML += '</div>'; 
  });
  return HTML;
}

//LastAccordion function
function LastAccordion(nested){
  var HTML = '';
  $.each(nested , function(key2 , value2){
    console.log(ObjLength(value2));
    if(key2 !== 'id'){
      HTML += '<h3>'+ key2 +'</h3>';
      HTML += '<div>id = '+ value2['id'] +'</div>';
    }
  });
  return HTML;
}


function ObjLength(obj) {
    return Object.keys(obj).length;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

由Final solution制作的@Mazhar

Answer 2

var obj={
  "A": {
    "id": "0",
    "B": {
      "id": "1"
    },
    "C": {
      "id": "2"
    },
    "D": {
      "id": "3"
    }
  },

   "B": {
    "id": "0",
    "B": {
      "id": "1"
    },
    "C": {
      "id": "2"
    },
    "D": {
      "id": "3"
    }
  }
};

function MakeAccordion(obj) {
        var htmlcode= '<div class="accordion">';
        for (var key in obj) {
            if (typeof obj[key] == "object")
              var subcode=obj[key];
              htmlcode=htmlcode+"<h3>"+key+"</h3>"+"<div class='accordion'>";         

          for(var key in subcode){  
  if(key!== 'id'){  
            htmlcode=htmlcode +"<h3>"+key+"</h3>"+"<div>id="+subcode[key].id+"</div>";
      }
             } 
              htmlcode=htmlcode+"</div>";
        }




           return htmlcode;

    };



var a=MakeAccordion(obj);
 console.log(a);