javascript - 在 Javascript 中将 JSON 转换为 HTML

Question

我正在尝试使用普通 JavaScript 将 JSON 文件转换为 HTML。我处理它的方式似乎有效，但代码并不理想。

我正在做的是检查键的值是否是一个对象。如果是，则这是一个新的 HTML 标记。如果不是，那么这是标签的属性。

我遇到的问题是我不知道如何正确循环对象并测试这些条件而不重复我的代码。

有人可以帮我确定如何更好地写这个吗？

function createComponent(component, defaults, map) {


  Object.keys(defaults).forEach(function (level1) {
    if (typeof defaults[level1] === "object") {
      var tag = document.createElement(level1);
      Object.keys(defaults[level1]).forEach(function (level2) {
        if (typeof defaults[level1][level2] === "object") {
          tag.appendChild(document.createElement(level2));
            Object.keys(defaults[level1][level2]).forEach(function (level3) {
            if (typeof defaults[level1][level2][level3] === "object") {
                console.log(defaults[level1][level2][level3]);
               tag.appendChild(document.createElement(level3));
            }
          });
        }
      });
    }
  });
}
createComponent("textBox", textBoxDefaults, map);

伪代码:

检查默认对象，该级别是否有对象？如果是这样，请创建一个具有相同 key 名称的 HTML 标记。是否存在不是对象的值？如果是，则使用键值对向创建的标签添加属性。当您找不到更多对象时，请停止深入研究 JSON。

示例 JSON

 textbox: {
      id: 1,
      name: "Text Box",
      tmprops: {
        cur: 0,
        min: 5000,
        visible: true,
      },
      tmctxlst: {
        version: "2",
        txttmctx: {
          alwysshw: false,
          name: "default"
        }
      },

期望的输出

 <textbox id="1" name="text box">
      <tmprops cur="0" min="5000" visible="true" />
      <tmctxlst version="2">
        <txttmctx alwysshow="false" name="default">
      </tmctxlst>
</textbox>

Answer 1

我相信避免代码重复的最简单方法是使用递归，它基本上如下所示:

function createObjectComponent(json) {
  const component = document.createElement("div");
  for(const entry of Object.entries(json)) {
    if(Array.isArray(value)) {
      component.appendChild(createArrayComponent(value));
    } else if(typeof value === "object") {
      component.appendChild(createObjectComponent(value));
    } else {
      component.appendChild(createSimpleValueComponent(value));
    }
  }
  return component
}

这是一个工作示例，带有一些小的 css，它包括您自己的示例以及数组处理组件的示例:

const appDiv = document.getElementById('app');

const example1 = {
  foo: 1,
  bar: {
    id: 2,
    obj: {
      test: 2
    }
  },
  a: ["a", "b", 1, {
    a: 1
  }]
}

const example2 = {
  id: 1,
  name: "Text Box",
  tmprops: {
    cur: 0,
    min: 5000,
    visible: true,
  },
  tmctxlst: {
    version: "2",
    txttmctx: {
      alwysshw: false,
      name: "default"
    }
  }
}

appDiv.appendChild(createObjectComponent(example2));
appDiv.appendChild(createObjectComponent(example1));
appDiv.appendChild(createArrayComponent(example1.a));

function createObjectComponent(json) {
  const component = document.createElement("div");
  component.className = "obj-component";
  component.innerHTML += "{";

  for (const entry of Object.entries(json)) {
    component.appendChild(getComponentForEntry(entry));
  }

  component.innerHTML += "}";

  return component
}

function getComponentForEntry([key, value]) {
  const entryDiv = document.createElement("div");
  const keySpan = document.createElement("span");

  keySpan.className = "key-span";
  keySpan.innerText = key + ":";

  entryDiv.appendChild(keySpan);
  if (Array.isArray(value)) {
    entryDiv.appendChild(createArrayComponent(value));
  } else if (typeof value === "object") {
    entryDiv.appendChild(createObjectComponent(value));
  } else {
    entryDiv.appendChild(createSimpleValueComponent(value));
  }

  return entryDiv;
}

function createArrayComponent(array) {
  const list = document.createElement("ul");
  list.className = "array-component";
  list.innerHTML += "[";
  for (let i = 0; i < array.length; i++) {
    const item = array[i];
    const listItem = document.createElement("li");
    listItem.appendChild(getComponentForEntry([i, item]))
    list.appendChild(listItem);
  }

  list.innerHTML += "]";

  return list;
}

function createSimpleValueComponent(value) {
  const span = document.createElement("span");
  span.innerText = value;

  return span;
}

#app {
  font-family: monospace;
}

div.obj-component {
  margin: 8px;
  background-color: #e4e4e4;
  border-radius: 6px;
  max-width: 300px;
  padding: 4px 16px;
}

ul.array-component {
  margin: 8px;
  background-color: #e4e4e4;
  list-style-type: none;
  padding: 4px 16px;
  border-radius: 6px;
  max-width: 300px;
}

span.key-span {
  padding-left: 16px;
  margin-right: 8px;
  color: blueviolet
}

span {
  color: green
}

<div id="app"></div>