javascript - 将多维数组中的元素追加到 html 页面

标签 javascript jquery html

我正在使用 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

    });
});

对不起我的英语。

最佳答案

这里有一个 fiddle 可以为您完成此操作 - 我稍微重新布局了您的返回值,因为让返回的值进一步缩进字符串下方没有什么意义。然后您无法判断它是键还是值。

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/

关于javascript - 将多维数组中的元素追加到 html 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21185232/

相关文章:

javascript - 为什么每次更改或重新加载页面时,我的 3 页脚图像都会变大?

javascript - 登录成功后必须重定向到页面;现在只需重新加载(刷新)页面

javascript - 即使没有发出跨源请求,JQuery getJSON CORS 错误?

javascript - 如何在 Javascript 中存储字节数组

javascript - 如何在模态对话框中获取选中的复选框行数据?

html - 粘性页脚不在正确的位置

JavaScript 对象 : What gets returned from an object constructor

javascript - 如果绑定(bind),Bootstrap CSS table-striped 不能与 knockout 一起使用

javascript - 避免使用拉斐尔缩放调整笔划大小

javascript - 移动网站表单中的输入屏蔽文本框不起作用