将 JSON 转换为元素树 [英] Convert JSON to Elements tree

问题描述

我想将 JSON(对象文字)转换为元素树 HTML.
我还想支持自定义 data-* 属性，例如:data-example、data-link 等

我的 JSON 示例:

{"<>":"div","content":["hello",{"<>":"span","content";:["Hello"],"attrs":{"class":"color-red"}}],"attrs":{"class":"flex"}}

现在这是我期望的输出:

helloHello

我不知道从哪里开始解决这个问题...

解决方案

JSON to HTML Elements tree

基本上，关键是使用递归函数.

• 稍微修改您的初始 JSON 以删除诸如 "<>>>>> 之类的奇怪属性，而使用 "tag".
• 创建两个辅助函数 newEL 和 newTN 以相应地生成具有属性或文本节点的新元素
• 创建一个递归函数 JSON2DF 将您的 JSON(或对象)数据解析为 DocumentFragment 容器，可以在以后 附加 任何需要的地方.
• 如果迭代对象有一个 content 数组 - 递归调用 JSON2DOM 对数组中的每个元素.

const newTN = (text) =>document.createTextNode(text);const newEL = (tag, attr) =>{const EL = document.createElement(tag);if (attr) Object.entries(attr).forEach(([k,v]) => EL.setAttribute(k, v));返回EL；};const JSON2DF = (data, PAR = new DocumentFragment()) =>{const CH = typeof data === "string" ?newTN(data) : newEL(data.tag, data.attr)if (data.content) data.content.forEach(d => JSON2DF(d, CH));//递归！PAR.append(CH);返回PAR；};常量数据 = {标签: "DIV",属性:{类:弹性"}，内容: ["一些 DIV 文本",{标签: "SPAN",attr: { class: "color-red", "data-test": "test" },内容: [一些跨度文本"，],}],};document.body.append(JSON2DF(data));

.color-red { color: red;}

结果如预期:

一些 DIV 文本<span class="color-red">一些跨度文本</span>

I'd like to turn JSON (Object literal) into Elements tree HTML.
I want to also support custom data-* attributes like i.e: data-example, data-link etc.

Example of my JSON:

{"<>":"div","content":["hello",{"<>":"span","content":["Hello"],"attrs":{"class":"color-red"}}],"attrs":{"class":"flex"}}

And now this is the output I expect :

<div class='flex'>hello<span class='color-red'>Hello</span></div>

I'm not sure where to start with that problem...

解决方案

JSON to HTML Elements tree

Basically, the key is to use a recursive function.

• Modify slightly your initial JSON to remove strange properties like "<>", use rather "tag".
• Create two helper functions newEL and newTN to generate new Element with attributes or Text Node accordingly
• Create a recursive function JSON2DF that will parse your JSON (or Object) data into a DocumentFragment container which can be later appended wherever is needed.
• If an iterating object has a content array - call recursively JSON2DOM on every element in the array.

const newTN = (text) => document.createTextNode(text);
const newEL = (tag, attr) => {
  const EL = document.createElement(tag);
  if (attr) Object.entries(attr).forEach(([k,v]) => EL.setAttribute(k, v));
  return EL;
};

const JSON2DF = (data, PAR = new DocumentFragment()) => {
  const CH = typeof data === "string" ? newTN(data) : newEL(data.tag, data.attr)
  if (data.content) data.content.forEach(d => JSON2DF(d, CH)); // Recursion!
  PAR.append(CH);
  return PAR;
};

const data = {
  tag: "DIV",
  attr: { class: "flex" },
  content: [
    "Some DIV text",
    {
      tag: "SPAN",
      attr: { class: "color-red", "data-test": "test" },
      content: [
        "Some span text",
      ],
    }
  ],
};

document.body.append(JSON2DF(data));

.color-red { color: red; }

The result is as expected:

<div class="flex">
  Some DIV text<span class="color-red">Some span text</span>
</div>

这篇关于将 JSON 转换为元素树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！