问题：

将嵌套数组转换为HTML结构

公孙志

2023-03-14

几天来，我一直在考虑这个“简单”的练习，结果被困住了。我都快疯了。我需要将嵌套数组转换为HTML。下面是数组的示例：

const data = ['html', [
  ['head', [
    ['title', 'Your title text goes here'],
  ]],
  ['body', { class: 'container' }, [
    ['h1', { class: 'header' }, 'h1 text'],
    ['div', [
      ['span', 'span text2'],
      ['span', 'span text3'],
    ]],
  ]],
]];

而预期的结果应该是这样的：

<html>
  <head>
    <title>your title text</title>
  </head>
  <body class="container">
    <h1 class="header">h1 text</h1>
    <div>
      <span>span text2</span>
      <span>span text3</span>
    </div>
  </body>
</html>

我已经从一个helper函数开始（从数组创建每个标记），下面是它现在的样子：

const tagBuilder = (arr) => {
  console.log(arr)
  // ['div']; ==> <div></div>
  if(arr.length === 1) {
    return `<${arr[0]}></${arr[0]}>`
  }
  // Maximum length of the pure array (without nested children) is - 3
  return arr.length === 3
  // ['h1', { class: 'header' }, 'html builder example']
  ? `<${arr[0]} class="${arr[1].class}">${arr[2]}</${arr[0]}>`
  // ['h1', { class: 'header' }]
  : arr.length === 2 && typeof arr[1] === 'object'
  ? `<${arr[0]} class="${arr[1].class}"></${arr[0]}>`
  // ['h1', 'header - text']
  : `<${arr[0]}>${arr[1]}</${arr[0]}>`
}

到目前为止还不错。当我试图创建实际的HTML构建器函数时，这个棘手的部分就开始了。我想迭代数组的每个元素，检查它是否有一个嵌套的元素（子），保存指定的标记，再深入一些。

const buildHTML = (array) => {
  let acc = ""
  const iterator = (arr) => {
    for(const el of arr) {
     
    }
  }
  iterator(array)
  return acc;
}

到目前为止，我可以在没有嵌套数组的情况下迭代和保存HTML结构，但是当数组有子组时，它就会中断。我尝试“减少”和嵌套“地图”，但没有运气。你能给我指出解决办法或正确的探索方式吗？我的猜测是，最终的函数应该是这样的：

null

const textAndArrChild = ['div',
['span', 'span text3']];
// <div><span>span text3</span></div>

const tagBuilder = (arr) => {
  // ['div']; ==> <div></div>
  if(arr.length === 1) {
    return `<${arr[0]}></${arr[0]}>`
  }
  // Maximum length of the pure array (without nested children) is - 3
  return arr.length === 3
  // ['h1', { class: 'header' }, 'html builder example']
  ? `<${arr[0]} class="${arr[1].class}">${arr[2]}</${arr[0]}>`
  // ['h1', { class: 'header' }]
  : arr.length === 2 && typeof arr[1] === 'object'
  ? `<${arr[0]} class="${arr[1].class}"></${arr[0]}>`
  // ['h1', 'header - text']
  : `<${arr[0]}>${arr[1]}</${arr[0]}>`
}

const buildHTML = (array) => {
  return array.reduce((acc, el, index, arr) => {
    if(typeof el === 'string' && Array.isArray(arr[index + 1])) {
      acc = tagBuilder([el]);
      // return acc += el.map(buildHTML) // TODO cause error
      // need to iterate through the nested array
    } else {
      // insert pure tags from an array into the acc
    }
    
    return acc;
  }, "")
}



console.log(buildHTML(textAndArrChild))

null

共有1个答案

法浩壤

2023-03-14

你可以让它变得更简单。如果我们不考虑格式化缩进，它可能是这样的。

null

const data = ['html', [
  ['head', [
    ['title', 'Your title text goes here'],
  ]],
  ['body', { class: 'container' }, [
    ['h1', { class: 'header' }, 'h1 text'],
    ['div', [
      ['span', 'span text2'],
      ['span', 'span text3'],
    ]],
  ]],
]];

const render = data =>{
  let tag, attributes, childrens;
  
  if(data.length === 2){
    [tag, childrens] = data;
  } else if(data.length === 3){
    [tag, attributes, childrens] = data;
  } 

  let attrStr = ""
  for(let attr in attributes){
    attrStr += " " + attr + '="' + attributes[attr] + '"';
  }
  
  let childrenStr = ""
  if(typeof childrens !== "string"){
      for(let children of childrens){
        childrenStr += render(children);
      }
  } else {
    childrenStr = childrens;
  }
  
  return (`<${tag}${attrStr}>${childrenStr}</${tag}>`)
}

console.log(render(data))

类似资料：

将嵌套列表转换为二维数组

问题内容：我正在尝试将嵌套列表转换为2d数组。我想把它做成一个。我尝试了以下方法：有没有可行的方法？请注意，直到运行时我才知道列表的大小，并且列表可能会锯齿。问题答案：没有简单的内置方法可以执行所需的操作，因为您只能返回存储在list中的元素数组，在您的情况下也可以是list。最简单的解决方案是创建二维数组，并用每个嵌套列表的结果填充它。（如果您像使用Alex一样将Java8与流一起
Pyspark：将具有嵌套结构的数组转换为字符串

问题内容：我有pyspark数据框，其中包含名为 Filters 的列：“ array>” 我想将数据帧保存在csv文件中，为此，我需要将数组转换为字符串类型。我尝试将其强制转换为：和，但是这两种解决方案都会为“过滤器”列中的每一行生成错误消息：代码如下样本JSON数据：谢谢！！问题答案：我创建了一个样本JSON数据集来匹配该模式：使用explode（）函数可以最佳化解决您的问题
使用JOLT转换将示例JSON转换为嵌套JSON数组

我遇到了一个问题，使用颠簸转换将平面 JSON 转换为嵌套 JSON。而且我对颠簸转型很陌生。输入和输出详细信息如下。我的输入：预期产量
嵌套数组的Jolt转换。

我正在尝试编写一个规范来使用jolt转换进行以下转换。我只对更改json中键的名称感兴趣，值应该保持不变。帮帮我。输入Json：预期输出：
Jolt转换嵌套json数组

我有json，其中包括多个产品，每个产品有多个不同的细节。使用jolt，我只需要输入json中的几个字段，遵循与输入json几乎相同的结构。我成功地迭代了产品，但是当我试图迭代每个产品变体时，我没有得到想要的输出。输入. json 这里是Spec.json 我想要的预期输出。我现在得到的实际输出。
将Pandas Dataframe转换为嵌套JSON

问题内容：我是Python和Pandas的新手。我正在尝试将Pandas Dataframe转换为嵌套的JSON。函数.to_json（）不能为我的目标提供足够的灵活性。以下是数据框的一些数据点（在csv中，以逗号分隔）：有很多重复的信息，我想要一个这样的JSON：我怎样才能做到这一点？编辑：再现数据帧的代码：问题答案：更新：结果（格式化）：旧答案：你可以用它做的，和方法：

将嵌套数组转换为HTML结构

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档