问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js加载嵌套json呈现列表?

头像
_XYZ111
    492253176

    data.json 文件

    {
    "name": "node-root",
    "cns": [
        {
            "name": "node 1",
            "cns": null
        },
        {
            "name": "node 2",
            "cns": [
                {
                    "name": "node 2-1",
                    "cns": null
                },
                {
                    "name": "node 2-2",
                    "cns": [
                        {
                            "name": "node 2-2-1",
                            "cns": null
                        },
                        {
                            "name": "node 2-2-2",
                            "cns": null
                        },
                        {
                            "name": "node 2-2-3",
                            "cns": null
                        }
                    ]
                },
                {
                    "name": "node 2-3",
                    "cns": null
                }
            ]
        },
        {
            "name": "node 3",
            "cns": null
        }
    ]
}

    这是我原先的代码

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://localhost:8000/library/jquery/3.6.0/jquery.min.js"></script>
        <script type="text/javascript">
            function treeNodeWrite(el, array) {
                $.each(array, function(key, val) {
                    console.log(val.name)
                    if (val.cns !== null) {
                        // 有子集
                        el.append(`<li>${val.name}</li>`)
                        el.find(`li:contains(${val.name})`).append("<ul></ul>")
                        el = el.find("ul").eq(0)
                        treeNodeWrite(el, val.cns)
                    } else {
                        el.append(`<li>${val.name}</li>`)
                        // 无子集
                        if(array[array.length - 1] === val){
                            el=el.parents("ul").eq(0)
                            treeNodeWrite(el, val.cns)
                        }
                    }
                    return
                })
            }

            $(function() {
                $.getJSON("data.json", function(data) {
                    treeNodeWrite($("ul"), data.cns);
                })
            })
        </script>
    </head>
    <body>
        <ul></ul>
    </body>
</html>

    当前的运行效果

    希望呈现的效果

    请问js代码应该怎么改求大佬指点?

    htmljavascriptjquery
    阅读 3.1k
    4 个回答
    得票最新
    头像
    云香水识
      3.5k1214
      ✓ 已被采纳

      image.png

      function treeNodeWrite(root, array) {
  $.each(array, function(key, val) {
    var el = $('<li/>')
    el.text(val.name)
    root.append(el)
    if (val.cns) {
      var r = $('<ul/>')
      treeNodeWrite(r, val.cns)
      el.append(r)
    }
  })
}

      https://jsbin.com/narayov/edit?js,output

      头像
      hfhan
        29k72241

        关键点在于el = el.find("ul").eq(0)，你的el是函数treeNodeWrite的参数，你改变了他的指向，那么下面用到的不就不是他了吗，所以这里用一个新变量去接收，另外下面else中的无子集下面的逻辑没看懂，这段也有问题，都去掉吧

        头像
        lie5860
          7111420
          头像
          _XYZ111
            492253176

            遍历json输出到页面的同时, 逐个获取li元素并输出到控制台

            <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://localhost:8000/library/jquery/3.6.0/jquery.min.js"></script>
        <script type="text/javascript">
            function traversal(data, el) {
                $.each(data, function(key, val) {
                    el.append(`<li>${val.name}</li>`)
                    console.log(el.find("li:last").html())
                    if (val.children !== null) {
                        el.find("li").eq(key).append("<ul></ul>")
                        traversal(val.children, el.find("ul:first"))
                    }
                })
            }

            $(function() {
                $.getJSON("data.json", function(data) {
                    traversal(data.children, $("#root"))
                })
            })
        </script>
    </head>
    <body>
        <ul id="root"></ul>
    </body>
</html>

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            被 1 篇内容引用
            推荐问题