使用纯 javascript 从对象创建 ul li

阿尼克4e

我面临将 JavaScript 对象转换为多级列表元素的问题。

输入 JavaScript 对象

let data = [
   {level: 1, content: 'First Lvl', link:'#'},
   {level: 2, content: 'Second Lvl', link:'#'},
   {level: 3, content: 'Third Lvl', link:'#'},
   {level: 2, content: 'Second Lvl 2', link:'#'},
   {level: 1, content: 'First Lvl 2', link:'#'}
];

输出:

<ul>
    <li>
        <a href="#">First Lvl</a>
        <ul>
            <li>
                <a href="#">Second Lvl</a>
                <ul>
                    <li>
                        <a href="#">Third Lvl</a>
                    </li>
                </ul>   
            </li>
            <li>
                <a href="#">Second Lvl 2</a>
            </li>
        </ul>   
    </li>
    <li>
        <a href="#">First Lvl 2</a>
    </li>
</ul>

我在 JQuery 中发现了一个几乎相似的代码 - http://jsfiddle.net/tkfeo6p2/

我尝试使用纯 JavaScript 编写此代码。但失败了。

var output = {}
var last_depth = 1;

data.forEach(function(val) {
    var depth;
    depth = val.level;
    if (depth > last_depth) {
      output[depth] = val.content;
    }
    output[depth] = val.content;
    return last_depth = depth;
});

console.log(output)
尼泰什

希望这是您正在寻找的解决方案。

请找到相同的步骤。

  • 将数据数组缩减为如下所示的多级结构。

[
  {
    "level": 1,
    "content": "First Lvl",
    "link": "#",
    "child": [
      {
        "level": 2,
        "content": "Second Lvl",
        "link": "#",
        "child": [
          {
            "level": 3,
            "content": "Third Lvl",
            "link": "#",
            "child": []
          }
        ]
      },
      {
        "level": 2,
        "content": "Second Lvl 2",
        "link": "#",
        "child": []
      }
    ]
  },
  {
    "level": 1,
    "content": "First Lvl 2",
    "link": "#",
    "child": []
  }
]

  • 可以使用递归函数将上述数组转换为模板字符串。

请在下面找到工作小提琴。

let data = [
    { level: 1, content: 'First Lvl', link: '#' },
    { level: 2, content: 'Second Lvl', link: '#' },
    { level: 3, content: 'Third Lvl', link: '#' },
    { level: 2, content: 'Second Lvl 2', link: '#' },
    { level: 1, content: 'First Lvl 2', link: '#' }
];
const formattedNode = data.reduce((acc, curr) => {
    if(acc.length > 0 && curr.level !== 1) {
        let node = acc;
        let index = curr.level;
        while (index > 1) {
            node = node[node.length - 1].child;
            index--;
        }
        node.push({ ...curr, child: [] });
    } else {
        acc.push({ ...curr, child: [] });
    }
    return acc;
}, []);

let templateStr = '<ul>';
formattedNode.forEach((node) => templateStr += parseNode(node));
templateStr += '</ul>';
function parseNode(node) {
    let tmpStr = '<li>';
    tmpStr += `<a href="${node.link}">${node.content}</a>`;
    if (node.child.length) {
        tmpStr += '<ul>';
        node.child.forEach((childNode) => {
            tmpStr += parseNode(childNode);
        })
        tmpStr += '</ul>';
    }
    tmpStr += '</li>';
    return tmpStr;
}
console.log(templateStr)
document.getElementById('target').innerHTML = templateStr;

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在javascript中使用li创建一个ul并使用文本使li类型复选框

jQuery到纯JavaScript ul li按钮单击

JavaScript 如何在 <ul> 中创建 <li> 并点击 <li>

如何使用javascript在ul中循环li

javascript 嵌套 ul li > ul li 搜索

JavaScript递归ul li json

使用ul li和无插件的javascript的树

Javascript使用数组将li添加到ul

如何使用类Javascript删除现有ul中的li

使用JavaScript将多个Li添加到Ul

动态创建ul&li

对Javascript对象使用纯函数

使用li的ID从ul中删除li

json 到嵌套 ul li jquery / javascript

从 JavaScript 填充的 ul 中获取 li 值

使用POST纯JavaScript发送JSON对象

如何使用Maven创建纯JavaScript项目?

从JavaScript中选择使用ng-repeat填充的UL> LI元素

如何使用 vanilla JavaScript 在 Ul li 上設置和刪除類?

使用 javascript 将新 li 添加到多个 ul 之一

如何使用.siblings()定位javascript中的ul li输入复选框项目

如何使用javascript将新的<li>添加到<ul> onclick

使用appendchild在JavaScript中将字符串转换为DOM节点(ul / li)

如何使用JavaScript为LI下的UL元素生成相同的类名?

使用javascript从ul li获取每个层次级别的字符串行

使用javascript将css类添加到ul中的所有li父元素

为什么在循环内使用$('ul li')。html的工作原理与普通javascript中的等效方法不同?

单击提交按钮时如何使用JavaScript将li元素添加到ul

如果 ul 没有使用 jquery 或 javascript 的类,如何隐藏 li