Jquery 展平（类）JSON数据

我有以下数组：

var data = {
    menu: [{
        name: 'Step 1',
        sub: [{
            name: 'Step 1 sub A',
            sub: null
        }, {
            name: 'Step 1 sub B',
            sub: null
        }, {
            name: 'Step 1 sub C',
            sub: [{
                name: 'Step 1 sub C sub A',
                sub: null
            }, {
                name: 'Step 1 sub C sub B',
                sub: [{
                    name: 'Step 1 sub C sub B sub A',
                    sub: null
                }, {
                    name: 'Step 1 sub C sub B sub B',
                    sub: null
                }]
            }]
        }]
    }, {
        name: 'Step 2',
        sub: [{
            name: 'Step 2 sub A',
            sub: null
        }, {
            name: 'Step 2 sub B',
            sub: [{
                name: 'Step 2 sub B sub A',
                sub: null
            }, {
                name: 'Step 2 sub B sub B',
                sub: null
            }, {
                name: 'Step 2 sub B sub C',
                sub: null
            }]
        }, {
            name: 'Step 2 sub B',
            sub: null
        }]
    }]
};

我想退货的是

Step 1
Step 1 > Step 1 sub A
Step 1 > Step 1 sub B
Step 1 > Step 1 sub C
Step 1 > Step 1 sub C > Step 1 sub C sub A
Step 1 > Step 1 sub C > Step 1 sub C sub B
etc. etc.

这就是我正在尝试的：

var $menu = $("#menu");

var getMenuItem = function (data) {

    var item = data.name; // start

    if (data.sub) { // if we have subs concat them
        var subList = '';
        $.each(data.sub, function () {
            subList =+ getMenuItem(this) + ' > ';
        });
        item = item + ' > ' + subList;
    }
    return item; // now return it
};

$.each(data.menu, function () {
    $menu.append(
        getMenuItem(this) + '<br />'
    );
});

我应该如何处理这个问题

---

在这里，递归方法无疑是最好的选择。下面的内容有点特定于您的用例，但可以很好地工作

function flatten(prefix, data) {
  for(var attr in data) {
    var n = data.name ? data.name + ' > ' : '';
    if(typeof data === 'object') flatten(prefix + n, data[attr])
    else console.log(prefix + n)
  }
}

// Hacky way is just to feed it a blank string to start
flatten('', data)

---

下面是一个介绍这个概念的例子。显然，它可以改进和定制，但这是一种非常简洁的方法，可以从这样的数据中删除维度。

这里有一个递归函数，我认为它可以满足您的需要。请注意，我打破了第一层，以避免以下情况：

步骤1>步骤1子C>步骤1子C子B>步骤1子C子B子B>步骤2

演示：

var数据={
菜单：[{
名称：“步骤1”，
分：[{
名称：“步骤1子A”，
sub:null
}, {
名称：“步骤1子B”，
sub:null
}, {
名称：“步骤1子C”，
分：[{
名称：“步骤1子C子A”，
sub:null
}, {
名称：“步骤1子C子B”，
分：[{
名称：“步骤1子C子B子A”，
sub:null
}, {
名称：“步骤1子C子B子B”，
sub:null
}]
}]
}]
}, {
名称：“步骤2”，
分：[{
名称：“步骤2子A”，
sub:null
}, {
名称：“步骤2子B”，
分：[{
名称：“步骤2子B子A”，
sub:null
}, {
名称：“步骤2子B子B”，
sub:null
}, {
名称：“步骤2子B子C”，
sub:null
}]
}, {
名称：“步骤2子B”，
sub:null
}]
}]
};
变量名=“”；
var el=document.querySelector（'pre'）；
功能输出{
//控制台日志；
el.appendChild（document.createTextNode）；
el.appendChild（document.createElement（'br'））；
}
函数展平（菜单）{
对于（变量i=0，len=menu.length；i'+菜单[i].name）；
输出（结果）；
if（菜单[i].sub）
展平（菜单[i].sub）；
其他的
名称=名称。替换（/[\s>]+[^>]+？$/，''）；
}
}
对于（变量i=0，len=data.menu.length；i

---

您可以通过一个简单的递归函数来实现这一点。您需要首先为当前级别创建

li

，然后检查

sub

项，然后通过这些项进行递归，并随附。试试这个：

函数menuFromObject（prev，m）{
$。每个（m，功能（i，菜单）{
var itemName=prev+（prev.length？'>'：''）+menu.name；
$（“#菜单”）.append（“
”+itemName+”
”）；
if（menu.sub&&menu.sub.length）
menuFromObject（itemName，menu.sub）；
});
}
menuFromObject（“”，data.menu）；

---

这不是JSON。这只是简单的JavaScript对象。JavaScript对象表示法（JSON）是一种基于字符串的格式，遵循特定的模式和实践。谢谢，它很接近，但每件事都会发生6次，如果菜单是大的，这会增加菜单项的数量。谢谢，我在递归函数方面做得不多，所以很值得学习-是否有可能阻止每个孩子按照OP使用

？确实有一个小的逻辑调整，试试这个：。我也更新了答案。

function flatten(prefix, data) {
  for(var attr in data) {
    var n = data.name ? data.name + ' > ' : '';
    if(typeof data === 'object') flatten(prefix + n, data[attr])
    else console.log(prefix + n)
  }
}

// Hacky way is just to feed it a blank string to start
flatten('', data)

function menuFromObject(prev, m) {  
    $.each(m, function(i, menu) {
        var itemName = prev + (prev.length ? ' > ' : '') + menu.name;
        $('#menu').append('<li>' + itemName + '</li>');        
        if (menu.sub && menu.sub.length) 
            menuFromObject(itemName, menu.sub);
    });
}

menuFromObject('', data.menu);