2

いくつかのJSONデータ（オブジェクトの単純な配列）があります。

var input= [
    {
        "cat": "some",
        "id": "0"
    },
    {
        "cat": "some",
        "id": "1"
    },
    {
        "cat": "some/category",
        "id": "2"
    },
    {
        "cat": "some/category/sub",
        "id": "3"
    },
    {
        "cat": "some/other",
        "id": "4"
    },
    {
        "cat": "some/thing/different",
        "id": "5"
    },
    {
        "cat": "some/thing/different",
        "id": "6"
    },
    {
        "cat": "yet/another",
        "id": "7"
    }
]

カテゴリに基づいて、ネストされたhtmlリストを生成したかったのです。

  • いくつかの
    • 0
    • 1
    • カテゴリー
      • 2
      • サブ
        • 3
    • 他の
      • 4
    • もの
      • 違う
        • 5
        • 6
  • まだ
    • 別
      • 7

私の最初のステップは、関数を使用して空のネストされたオブジェクトを作成することでした。

createNestedObject = function(base, names) {
  var  = 0;
  var results = [];
  while (i < names.length) {
    base = base[names[i]] = base[names[i]] || {};
    results.push(i++);
  }
  return results;
}

次に、「cat」文字列を分割し、ループ内で「ids」をプッシュすることにより、データを入力しました（例：some.category ids.push（7））最終結果は次のとおりです。

var output = 
{
    "some": {
        "ids": [
            "0",
            "1"
        ],
        "category": {
            "ids": [
                "2"
            ],
            "sub": {
                "ids": [
                    "3"
                ]
            }
        },
        "other": {
            "ids": [
                "4"
            ]
        },
        "thing": {
            "different": {
                "ids": [
                    "5",
                    "6"
                ]
            }
        },
        "yet": {
            "another": {
                "ids": [
                    "7"
                ]
            }
        }
    }
}

ただし、キー名と入れ子の深さが事前にわからないため、構造に多少問題があります。ここに表示されている「出力」または「入力」データからネストされたHTMLリストを生成するにはどうすればよいですか？

4

4 に答える 4

2

これはどう？

例

JS

function ToHTML(input){
    var html = '<ul>'; 

    for(var key in input){
        if(input[key] instanceof Array){
            for(var i = 0; i < input[key].length; i++){
                html += '<li>' + input[key][i] + '</li>';
            }
        }else{
            html += '<li>' + key + ToHTML(input[key]) + '</li>';
        }           
    }
    html += '</ul>';
    return html; 
}

function ToNestedObject(input){
    var i, y, len = input.length, parts, partsLen, obj = {}, prev;
    for(i = 0; i < len; i++){
        parts = input[i].cat.split('/'); 
        partsLen = parts.length;
        prev = obj; 
        for(y = 0; y < partsLen; y++){
            prev[parts[y]] = prev[parts[y]] || {};    
            prev = prev[parts[y]];
        }
        if(!prev.ids){
            prev.ids = []; 
        }
        prev.ids.push(input[i].id); 
    }
    return obj; 
}

var input= [
    {
        "cat": "some",
        "id": "0"
    },
    {
        "cat": "some",
        "id": "1"
    },
    {
        "cat": "some/category",
        "id": "2"
    },
    {
        "cat": "some/category/sub",
        "id": "3"
    },
    {
        "cat": "some/other",
        "id": "4"
    },
    {
        "cat": "some/thing/different",
        "id": "5"
    },
    {
        "cat": "some/thing/different",
        "id": "6"
    },
    {
        "cat": "yet/another",
        "id": "7"
    }
];

document.getElementById('test').innerHTML = ToHTML(ToNestedObject(input));

HTML

<div id='test'></div>
于 2013-03-27T13:27:19.413 に答える
1

配列はオブジェクトツリーに変換されます

function buildTreeObject ( input ) {

        var obj = {}, n ;

        input.forEach( function( v ){
                var keys = v.cat.split('/'),
                    n = obj ;        

                keys.forEach( function( k ){        
                        if ( !n[k]) {
                            n[k] = {}; 
                        }                 
                        n = n[k];                 
                }); 

                n[ v.id ] = v.id ;                
        });

        return obj;
}

HTMLを構築するための関数が必要です

function buildHtml( obj , ul ) {

    for (i in obj) {

        var li = document.createElement('li');
        li.innerHTML = i;
        ul.appendChild( li );

        if ( typeof(obj[i])== "object" ) {

            childUl = document.createElement('ul');
            li.appendChild( childUl ); 

            buildHtml(obj[i], childUl );            
        }  

    }
}

そしてhtmlを利用するinput（すなわちur配列）

var ul   = document.createElement('ul'),
    tree =  buildTreeObject( input ) ;

buildHtml( tree ,ul );

var div = document.createElement('div');    
div.appendChild( ul );

console.log( div.innerHTML );

希望するulliリストを出力するのはどれですか

あなたはhttp://jsfiddle.net/r3RWL/で結果を見ることができます

于 2013-03-27T13:32:20.497 に答える
1

タグの下にjqueryを追加したので、jQueryで問題の解決策を書きました。コードは次のとおりです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>
<body>
    <div id="someDiv">
    </div>
    <script>

    function prepareNestedStructure(input) {
        var output = {},
            catLevels,
            currentCat;

        $.each(input, function(index, catObject) {
            catLevels = catObject.cat.split('/');
            currentCat = output;

            $.each(catLevels, function(index, name) {
                if(!currentCat[name])
                    currentCat[name] = {};
                currentCat = currentCat[name];
            });

            currentCat[catObject.id] = catObject.id;
        });

        return output;
    }

    function fillList(parentListEl, node) {
        $.each(node, function(key, value) {
            parentListEl.append('<li>' + key + '</li>');

            if(jQuery.type(value) === 'object') {
                var childEl = $('<ul></ul>');
                parentListEl.append(childEl);
                fillList(childEl, value);
            }
        });
    }

    var input= [
        {
            "cat": "some",
            "id": "0"
        },
        {
            "cat": "some",
            "id": "1"
        },
        {
            "cat": "some/category",
            "id": "2"
        },
        {
            "cat": "some/category/sub",
            "id": "3"
        },
        {
            "cat": "some/other",
            "id": "4"
        },
        {
            "cat": "some/thing/different",
            "id": "5"
        },
        {
            "cat": "some/thing/different",
            "id": "6"
        },
        {
            "cat": "yet/another",
            "id": "7"
        }
    ];

    var output = prepareNestedStructure(input);

    var ulDomElement = $('<ul></ul>');
    fillList(ulDomElement, output);
    $('#someDiv').append(ulDomElement);

    </script>
</body>
</html>
于 2013-03-27T14:45:23.423 に答える
0

これはどうですか？

transform_deeply_nested_object = (dno) ->
    result = ""
    for key, value of dno
        if value instanceof Array
            result += "<ul>"
            for elem in value
                result += "<li>" + elem + "</li>\n"
            result += "</ul>"
        else
            result += "<ul><li>" + key + "</li>"
            result += transform_deeply_nested_object value
            result += "</ul>"

注意：テストされていません！

重要：これには、すべてのリーフが常に配列の要素である必要があります。

于 2013-03-27T13:03:57.210 に答える