[javascript]在js中将数组解析为无序列表

· 收录于 2024-01-06 16:46:10 · source URL

问题详情

如何以类似于以下内容的形式解析js数组：

const arr = [
            "&&",
            [
                "==",
                "first",
                "1-1"
            ],
            [
                "&&",
                [
                    "==",
                    "second1",
                    "2-1"
                ],
                [
                    "==",
                    "second2",
                    "2-2"
                ]
            ]
        ]

到 HTML 无序 （ul） 列表，格式为：

<ul>
    <li>&&
        <ul>
            <li>first == 1-1</li>
            <li>&&
                <ul>
                    <li>second1 == 2-1</li>
                    <li>second2 == 2-2</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Arr 在形式上是 [运算符、条件/子齿]。 正如你所猜到的，我需要一个UI来编辑arr内容。Arr 表示 JSON 字符串中where筛选器定义的形式。因此，当用户更改列表（在无序列表中添加或删除节点）时，我需要将更改解析回数组，但首先要做的事情。 也许有一些图书馆，但我找不到它。

我尝试了这样的递归：

    function arrayToHTML(arr, container) {
     if (!Array.isArray(arr) || arr.length === 0) return
     const operator = arr[0]
     const conditions = arr.slice(1)
     if (operator === '&&') {
      this.arrayToHTML(conditions, container)
     }
    }

最佳回答

一种可能的选择是将数组 （op） 的第一个运算符元素与数组的其余部分 （conds） 分离出来（使用参数 <a href=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment rel=nofollow noreferrer>destructuring） 完成），然后使用 operator 元素构建 <li>，下面嵌套子元素，该元素基于映射 cond 构建数组。不过，在映射 conds 数组之前，您可以首先检查 conds 中的第一个元素是否是数组（如果它是 arary，则表明它具有嵌套/子条件）。如果它是一个数组，则可以再次递归构建列表结构。否则，如果 conds 中的第一个元素不是数组，那么你已经达到了基本情况，可以构建子/终止 <li> 条件字符串：

const arr = ["&&", [ "==", "first", "1-1" ], [ "&&", [ "==", "second1", "2-1" ], [ "==", "second2", "2-2" ] ] ];

const generateHTMLAux = ([op, ...conds]) => {
  const [second, third] = conds;

  return Array.isArray(second)
    ? `<li>${op}
      <ul>
        ${conds.map(generateHTMLAux).join('')}
      </ul>
    </li>`
    : `<li>${second} ${op} ${third}</li>`;
}
const generateHTML = (arr) => `<ul>${generateHTMLAux(arr)}</ul>`;

const res = generateHTML(arr);
document.body.innerHTML = res;
console.log(res);
See browser console for HTML structure