Javascript 使用jQuery创建嵌套列表

我尝试了很多创建嵌套ul/li的答案，但似乎无法创建一个。我对js很陌生

数据在页面加载后被抓取，并以如下格式出现

data={
“键1”：[“值1”、“值2”、“值3”]，
“键2”：[“值4”、“值5”、“值6”]，
“键2”：[“值7”]
}

作为奖励，我希望单击一个键并下拉（展开）以显示值。但我无法在下面的结构中加载数据。可以有任意数量的键，具有任意长度的值（列表）。此外，这些键可以命名为任何名称

<ul>
  <li>
    key1
    <ul>
      <li>value1</li>
      <li>value2</li>
      <li>value3</li>
    </ul>
  </li>
  <li>
    key2
    <ul>
      <li>value4</li>
      <li>value5</li>
      <li>value6</li>
    </ul>
  </li>
  <li>
    key3
    <ul>
      <li>value7</li>
    </ul>
  </li>
</ul>

关键1

价值1
价值2
价值3



键2

价值4
价值5
价值6



键3

价值7

我更新了添加我一直在尝试的jquery代码。我没有包括它，因为我尝试了许多变体来获取上面嵌套结构中的数据，并且可能做得不对

jQuery(document).ready(function($) {

$.get('url', function(data){

            var $ul = $('<ul></ul>');

            function getList(item, $list) {

                $.each(item, function (key, value) {
                    var $li = $('<li />');
                    $li.append($('<a href="#">' + key + '</a>'));

                    var $subul = $("<ul/>");

                    $.each(value, function(i) {
                        var subli = $('<li/>')
                        .text(value[i])
                        .appendTo(subli);
                    });
                    $subul.append(subli);


                    $li.append($subul)

                });
            }
            getList(data, $ul);
            $ul.appendTo("div_containing_ul");
    });});

jQuery（文档）.ready（函数（$）{
$.get（'url'，函数（数据）{
var$ul=$（“
”）；
函数getList（项$list）{
$。每个（项目、功能（键、值）{
变量$li=$（“
”）；
$li.追加（$（''）；
var$subul=$（“
”）；
$。每个（值、函数（i）{
var subli=$（“
”）
.text（值[i]）
.附录（第i部分）；
});
$subul.追加（subli）；
$li.附加（$subul）
});
}
getList（数据，$ul）；
$ul.附录（“包含ul的分部”）；
});});

一个错误和一个缺少的追加

.appendTo（subli）；

实际上应该是

.appendTo（$subul）；

，在函数末尾，您需要将

$li

添加到

$list

中

数据={
“键1”：[“值1”、“值2”、“值3”]，
“键2”：[“值4”、“值5”、“值6”]，
“键3”：[“值7”]
}
jQuery（文档）.ready（函数（$）{
var$ul=$（“
”）；
函数getList（项$list）{
$。每个（项目、功能（键、值）{
变量$li=$（“
”）；
$li.追加（$（''）；
var$subul=$（“
”）；
$。每个（值、函数（i）{
var subli=$（“
”）
.text（值[i]）
.appendTo（$subul）；//您需要将其附加到$subul而不是$subli
});
$li.append（$subul.appendTo（$list）；//您需要将$li追加到$list中
});
}
getList（数据，$ul）；
$ul.附于（“#div_包含_ul”）；
})；

问题在于递归。 你不知道数据是否总是这样，嵌套的层是否只有两层深

我用递归重写了您的示例，该递归考虑了无止境的菜单级别

jQuery(document).ready(function ($) {


    function caller(data) {
        var $ul = $('<ul></ul>');
        recursiveCaller(data, $ul);
        return $ul;
    }

    function recursiveCaller(subdata, $parent) {
        if( typeof subdata === 'object' ) {
            for(var key in subdata) {
                $parent.text(key)
                var $sublist =  $('<ul></ul>');
                recursiveCaller(subdata[key], $sublist);
            }
        } else {
            var $child = $('<li></li>');
            $child.text(subdata)
            $parent.append($child);
        }
    }

    $.get('url', function () {
        var $menu = caller(data);
        $('#div_containing_ul').append($menu);
    });
});

---

祝你好运

一个简短的递归版本，结果很好：

function buildList(data) {
    var $ul = $('<ul></ul>');
    for (const key in data) {
        var $child = $('<li></li>');
        $ul.append($child)
        if (typeof data[key] === 'object') {
            $child.text = $child.text(key);
            $child.append(buildList(data[key]));
        } else {
            $child.text = $child.text(key + ' : ' + data[key]);
        }
    }
    return $ul;
}

---

向我们展示一些您尝试过的代码，这样我们就可以告诉您什么是错误欢迎使用堆栈溢出。您似乎对一般编程不熟悉？；您需要将问题分解为关键组件，并尝试了解您不知道的内容。我建议您尝试做的第一件事是使用

Object.keys（数据）

并使用它制作一个for循环，只需打印

key1
..
keyN

。谢谢大家！我从中学到了很多东西，并且能够让jquery完成我想要的任务！最后的结果如下：

function buildList(data) {
    var $ul = $('<ul></ul>');
    for (const key in data) {
        var $child = $('<li></li>');
        $ul.append($child)
        if (typeof data[key] === 'object') {
            $child.text = $child.text(key);
            $child.append(buildList(data[key]));
        } else {
            $child.text = $child.text(key + ' : ' + data[key]);
        }
    }
    return $ul;
}

0
    timestamp : 1587732029600
    partner
        id : 0
        name : Name1
        email : a@b.com
        company
            id : 0
            name : SomeCompany1
1
    timestamp : 1587732029600
    partner
        id : 1
        name : Name2
        email : c@d.com
        company
            id : 1
            name : SomeCompany2