遍历 javascript 对象并创建嵌套列表

Question

我通常不会遇到使用 jQuery 遍历对象和数组的问题，但这让我很困惑。

我有一个订单列表，我需要添加列表项才能使用该对象。我正在尝试遍历该对象并为每个键和该列表项内部创建一个列表项，我需要使用数组中的值创建另一个有序列表。

我可以让外部列表项正常工作，但是当涉及到嵌套列表时，一切都变成梨形了。

var obj = {
    2: ['a','b','c','d','e'],
    3: ['a','b','c','d','e'],
    4: ['a','b','c','d','e'],
    5: ['a','b','c','d','e'],
};

$.each(obj, function(key, val) {
    // create the parent list items
    $('.list').append($('<li></li>').html('<a href="#">Row ' + key + '</a><ol></ol>'));

    // create the nested list items
    $.each(val, function(k, v) {
       // this is where it goes wrong
    });
});

我已经在 SO 和其他地方搜索过解决方案，但找不到适合我的任何东西

Answer 1

不确定 "all goes pear shaped" 对您的情况意味着什么，但是对代码的这种轻微重写效果很好：

$(function () {

    var obj = {
        2: ['a','b','c','d','e'],
        3: ['a','b','c','d','e'],
        4: ['a','b','c','d','e'],
        5: ['a','b','c','d','e'],
    };
    
    $.each(obj, function(key, values) {
        var $li = $('<li></li>').appendTo(".list"),
            $a  = $("<a>", {text: 'Row ' + key}).appendTo($li),
            $ol = $('<ol></ol>').appendTo($li);
    
        $.each(values, function(i, val) {
           $("<li>", {text: val}).appendTo($ol);
        });
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ol class="list"></ol>

我建议使用 $("<element>", {params: 'values'}) 语法在 jQuery 中创建具有未知数据的元素，以避免从一开始就出现任何转义问题。

另请注意，对象键的迭代顺序未在 JavaScript 中定义。如果您依赖于某种顺序，您必须明确地预先对对象键进行排序并迭代排序键数组而不是对象。

在这些情况下，将数组而不是对象发送到客户端通常更容易（也更合适）。

遍历 javascript 对象并创建嵌套列表

Looping through javascript object and create nested list

arrays

each

jquery

json

object