Преобразование вложенного объекта JSON в формат Accordion - PullRequest
Новая
       7

Преобразование вложенного объекта JSON в формат Accordion

0 голосов
/ 20 февраля 2019

Я пытался преобразовать вложенный объект JSON в формат, в котором работает jquery ACCORDION.Я просмотрел много ссылок, но не смог найти правильного решения.Вот как выглядит мой JSON: 

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

ПРИМЕЧАНИЕ: «B» или «C» или «D» могут быть дополнительно вложены, что приведет к вложенному формату аккордеона.

Я пробовалмного подходов, но результаты не то, что я ожидаю.Может кто-нибудь, пожалуйста, помогите мне.

Это один из моих подходов, который не работает: 

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>

Ответы [ 2 ]

0 голосов
/ 20 февраля 2019 
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);
0 голосов
/ 20 февраля 2019

Пока вы пометили 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>

Окончательное решение от @ Мажар

...