將多維數組中的元素追加到html頁面

Question

我正在設計一個帶有jquery的類別系統，可以在其中將值插入多維數組，然后使用jquery將它們附加到某些html頁面。 我遇到一個問題，每次我向數組中添加更多元素時，我都必須更新代碼。

var arr = [];

arr =
{
"a":{
      "d":"value",
      "e":"value",
      "f":"value",
      "g":{"some value":[1, 2, 3]}
    },
"b":{
    "value1":"value",
    "value2":{"aaa":{"sss": "ddd"}, "bbb":{"eee": "ddd"}},
    "value3":"value vvv"
    },
"c":[1, 2, 3]
};

我想將數組的元素附加到html頁面，這樣結果將如下所示：

-a
--d
---value
--e
---value
--f
---value
--g
---some value
----1
----2
----3
-b
--value1
---value
--value2
---aaa
----sss
----ddd
---bbb
----eee
----ddd
--value3
---value vvv
-c
--1
--2
--3

我想編寫一系列$ .each語句以遍歷任何多維數組（具有x個級別）並附加其元素，如上所示。 我遇到的問題是我正在獲取[object Object]值，並且理解原因，但是我需要獲取並附加所有元素。 我不確定如何編寫$ .each語句。

這就是我嘗試過的

$.each(arr, function(idx, obj){ 
    $("#categories").append("--"+obj+"<br>");
    $.each(obj, function(key, value){
        $("#categories").append("--"+value+"<br>");
         //keep going with the each statements and check if the elements are objects

    });
});

對不起我的英語不好。

Answer 1

這是為您執行此操作的小提琴手-我稍微重新整理了您的返回內容，因為讓返回的值進一步縮進字符串下方沒有多大意義。 然后，您無法確定它是鍵還是值。

var indent = "";

function myFunction(obj) {

    indent += '-';

    for (var key in obj) {

        x = obj[key];

        if ($.isPlainObject(x)) {
            $('#categories').append(indent + key + '<br />');
            myFunction(x);
        } else {
            $('#categories').append(indent + key + '<br />');
            if (typeof x === 'object') {
                for (var key in x) {
                    $('#categories').append(indent + '-' + x[key] + '<br />');
                }
            } else {
                $('#categories').append(indent + '-' + x + '<br />');
            }
        }
    }

    indent = indent.substring(0, indent.length - 1);
}

myFunction(arr);

http://jsfiddle.net/8u53K/1/

Answer 2

幾分鍾后，我做到了。

$.each(arr, function(idx, obj){ 
$("#categories").append("-"+idx+"<br>");
for(var i in obj)
{
    if (typeof (obj[i])!='number')
          $("#categories").append("--"+i+"<br>");
    if(typeof (obj[i])==='object')
    {
        for(var j in obj[i])
        {
            $("#categories").append("---"+j+"<br>");
            var len =obj[i][j].length;
            if(typeof len=='undefined')
            {
                for (var m in obj[i][j])
                    $("#categories").append("----"+m+"<br>");
                $("#categories").append("----"+obj[i][j][m]+"<br>");
            }
            else
            {
                for(var k=0;k<obj[i][j].length;k++)
                {
                   $("#categories").append("----"+obj[i][j][k]+"<br>");
                }
            }

        }
    }
    else
    {
    $("#categories").append("---"+obj[i]+"<br>");
    }
}

});

這是一個小提琴的例子