JQUERYでJSONデータ→TREEリストについて

Question

#やりたいこと

下記のようなJSONデータがあり、親子関係からリストを作成したい。

データ

const data = eval(
{
"1": {"H10": "CAP", "H20": "GR", "H30": "GR-TC", "H40": "GR01TC", "Strategy": "11AA"}, 
"2": {"H10": "CAP", "H20": "GR", "H30": "GR-TC", "H40": "GR02TC", "Strategy": "11AB"},
"3": {"H10": "CAP", "H20": "GR", "H30": "GR-TC", "H40": "GR03TC", "Strategy": "11AC"}
}

アウトプット

下表のように共通キーを一つの親にして、階層をリスト化したい

□CAP
   □GR
　　　□GR-TC
　　　　□GR01TC
　　　　□GR02TC
　　　　□GR03TC

#現状
下記のように、キーをリストとして、itemに入れて回しています。
親子関係は階層の深さDEPTHを使って表しています。

#やりたいこと
子の要素の際に、<UL></ul>で要素を括りたい
appendTo で親要素に<ul>を付けていますが、うまくいかない

#質問
JqueryでDEPTHの深さに応じて、要素そのものを<ul>で括り、インデントを下げて表示をしたい。
すみませんが、jqueryに不慣れですので、教えてください。

        for(j=0;j<depth;j++){
            $parentUL = $('<ul>', {
//            style: 'display: none'//
            }).appendTo($item);
        }

<script type='text/javascript'>

const data = eval({{df|tojson|safe}});

function addItem(parentUL, branch) {
    var buf=[];
    for (i=1;i<Object.keys(branch).length;i++){
        depth =0;
        for (var item in branch[1]) {   //loop of key value 
        switch(i){
                case 1:
                    buf[item]=branch[i][item]   //init value
                    addhtml(parentUL,i,branch[i][item],depth);
                break;

            default:
                    if (branch[i][item]==buf[item]){
                break;
                    }
        }
        depth=depth+1;
    }
}
}

function addhtml(parentUL,i,text,depth){
    $item = $('<li>', {
            id: "item" + i
        });
        $item.append($('<input>', {
            type: "checkbox",
            id: "item" + i,
            name: "item" + i
        }));
        $item.append($('<label>', {
            for: "item" + i,
            text: text
        }));
        for(j=0;j<depth;j++){
            $parentUL = $('<ul>', {
//            style: 'display: none'//
            }).appendTo($item);
        }
        parentUL.append($item);
}

$(document).ready(function () {
    addItem($('#root1'), data);
    $(':checkbox').change(function () {
        $(this).closest('li').children('ul').slideToggle();
    });
    $('label').click(function(){
        $(this).closest('li').find(':checkbox').trigger('click');
    });
});
</script>

Comments

[m.ts10806]

html で静的イメージ（モック）は作ってみましたか？
それができてないと動的に作るのは難しいかと思います。

Answer 1

階層を扱う場合、再帰処理(関数内で自分自身を呼び出してループする処理)で書くと、慣れない内は難しいかもしれないですが、最終的にはそのほうがスッキリ書けます。(というか、再帰で書かないとグチャグチャになります)

<ul id="root1"></ul>
<script type='text/javascript'>
const maxDep = 4
const tree = {};

const data = eval({
    "1": {"H10": "CAP", "H20": "GR", "H30": "GR-TC", "H40": "GR01TC", "Strategy": "11AA"}, 
    "2": {"H10": "CAP", "H20": "GR", "H30": "GR-TC", "H40": "GR02TC", "Strategy": "11AB"},
    "3": {"H10": "CAP", "H20": "GR", "H30": "GR-TC", "H40": "GR03TC", "Strategy": "11AC"}
});

// データの整形
function maketree(row, dep) {
    let target = tree;

    for (let i = 0; i <= dep; i++) {
        const k = Object.keys(row)[i];
        if (row[k] in target) {
            target = target[row[k]];
        } else {
            target[row[k]] = {}
        }
    }

    if (dep == maxDep) return;
    maketree(row, dep + 1); // 再帰
}

// HTML出力
function output(ob, $ul) {
    Object.keys(ob).forEach(key => {

        const $li = $("<li>");
        $li.append("<input type='checkbox'>");
        $li.append($("<label>").html(key))
        $ul.append($li);

        // 子がいるなら
        if (Object.keys(ob[key]).length > 0) {
            const $nestUl = $("<ul>");
            $li.append($nestUl);
            output(ob[key], $nestUl); // 再帰
        }
    });
}

Object.keys(data).forEach(i => {
    maketree(data[i], 0);
});

$(document).ready(function () {

    output(tree, $("#root1"));

    $(':checkbox').change(function () {
        $(this).closest('li').children('ul').slideToggle();
    });
    $('label').click(function(){
        $(this).closest('li').find(':checkbox').trigger('click');
    });
});
<script>

Comments

[yuujiMotoki]

ありがとうございます。
Treeというデータ構造を最初に作り、次にHTML化されているのですね。
まだソースコードと動きを解読することができていませんが、
どちらも再帰の処理が加えられていて、自分で追いかけてみて勉強してみます。
この処理が書けずに、ずいぶん時間がかかってしまいましたが
この度は、ご提案いただき大変助かりました。
どうもありがとうございます