提问人：VijaySolanki 提问时间：11/3/2023 更新时间：11/3/2023 访问量：37
使用小胡子或把手将大型 JSON 转换为 HTML，并将过程从 HTML 逆转为 JSON
Converting Large JSON to HTML with Mustache or Handlebars and Reversing the Process from HTML to JSON
问：
我有一个 JSON 文件的集合，每个文件包含 400 到 500 行代码 （LOC） 的数据。我需要将此 JSON 数据转换为 HTML 格式，并以结构化格式完成适当的类、样式和图像呈现。此外，我还需要能够反转此过程，将 HTML 转换回 JSON。
我尝试使用 Mustache 和 Handlebars 等库来完成此任务，但我遇到了转换问题。生成的 HTML 不符合我的期望，我不确定如何合并样式和图像。
谁能提供指导或代码示例来帮助我有效地实现这种转换和逆转过程？任何协助或建议将不胜感激。
先谢谢你！
<!DOCTYPE html>
<html>
<head>
<title>JSON to Mustache</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
<script id="image-template" type="text/x-handlebars-template">
<div class="{{staticClass}}">
<img src="{{props.src.xs}}" alt="{{name}}" class="{{props['content-class']}}" style="height: {{props.height}};">
</div>
<div class="{{scopedSlots.default[0].staticClass}}">
<div class="{{scopedSlots.default[0].scopedSlots.default[0].staticClass}}">
<h1>{{scopedSlots.default[0].scopedSlots.default[0].scopedSlots.default[0].props.text}}</h1>
<p>{{scopedSlots.default[0].scopedSlots.default[0].scopedSlots.default[1].props.text}}</p>
</div>
</div>
</script>
<script id="container-template" type="text/x-handlebars-template">
<div class="{{staticClass}}">
<div class="{{scopedSlots.default[0].staticClass}}">
<div class="{{scopedSlots.default[0].scopedSlots.default[0].staticClass}}">
<h1>{{scopedSlots.default[0].scopedSlots.default[0].scopedSlots.default[0].props.text}}</h1>
<p>{{scopedSlots.default[0].scopedSlots.default[0].scopedSlots.default[1].props.text}}</p>
</div>
</div>
<div class="{{scopedSlots.default[1].staticClass}}">
<div class="{{scopedSlots.default[1].scopedSlots.default[0].staticClass}}">
{{scopedSlots.default[1].scopedSlots.default[0].props.code}}
</div>
</div>
</div>
</script>
<script>
$(document).ready(function () {
const imageData = {
data: {
name: "image",
staticClass: "cms-image",
props: {
src: {
xs: "https://res.cloudinary.com/dfysg77xz/image/upload/v1694437251/qualified_hardware/template/hylu63mzrp0milyyton9.png",
lg: "https://res.cloudinary.com/dfysg77xz/image/upload/v1694692718/qualified_hardware/template/oyt9f6bs1gulmqphchbe.png",
},
"content-class": "d-flex justify-center align-center",
height: "300px",
},
scopedSlots: {
default: [
{
name: "container",
data: {
staticClass: "cms-container",
scopedSlots: {
default: [
{
name: "row",
data: {
staticClass: "cms-row",
scopedSlots: {
default: [
{
name: "column",
data: {
staticClass:
"text-center white--text py-12 cms-column",
scopedSlots: {
default: [
{
name: "text",
data: {
staticClass: "mb-6 cms-text",
props: {
text: "Privacy Policy",
as: "h1",
},
},
},
{
name: "text",
data: {
staticClass: "cms-text",
props: {
text: "",
as: "p",
},
},
},
],
},
},
},
],
},
},
},
],
},
},
},
],
},
},
};
const containerData = {
data: {
name: "container",
staticClass: "my-12 cms-container",
scopedSlots: {
default: [
{
name: "row",
data: {
staticClass: "cms-row",
scopedSlots: {
default: [
{
name: "column",
data: {
staticClass: "cms-column",
props: {
cols: {
xs: 12,
md: 9,
},
},
scopedSlots: {
default: [
{
name: "html",
data: {
staticClass: "cms-html",
props: {
content:
"<h1>Privacy Policy</h1><p>Last Updated July 21, 2020</p>...",
},
},
},
],
},
},
},
{
name: "column",
data: {
staticClass: "cms-column",
props: {
cols: {
xs: 12,
md: 3,
},
},
scopedSlots: {
default: [
{
name: "block",
data: {
staticClass: "cms-block",
props: {
code: "template.page.left_block",
},
},
},
],
},
},
},
],
},
},
},
],
},
},
};
function preprocessData(data) {
const staticClass = data.data.staticClass; // Extract the staticClass from the data
// Check if nested structures exist
if (data.data.scopedSlots && data.data.scopedSlots.default) {
const defaultData = data.data.scopedSlots.default[0];
if (defaultData.scopedSlots && defaultData.scopedSlots.default) {
const textValue = defaultData.scopedSlots.default[0].props.text;
// Create a new object with flattened data structure
return {
name: data.name,
staticClass: staticClass,
props: data.data.props,
text: textValue,
};
}
}
// If any part of the nested structure is missing, handle it gracefully
return {
name: data.name,
staticClass: staticClass,
props: data.data.props,
text: null, // or any default value you prefer
};
}
// Preprocess the JSON data
const preprocessedImageData = preprocessData(imageData);
const preprocessedContainerData = preprocessData(containerData);
// Compile the Handlebars templates (similar to the previous example)
const imageTemplate = Handlebars.compile(
document.getElementById("image-template").innerHTML
);
const containerTemplate = Handlebars.compile(
document.getElementById("container-template").innerHTML
);
// Render the templates with preprocessed data
const imageHtml = imageTemplate(preprocessedImageData);
const containerHtml = containerTemplate(preprocessedContainerData);
// Insert the rendered HTML into the document
document.getElementById("content").innerHTML =
imageHtml + containerHtml;
});
</script>
</body>
</html>
答： 暂无答案
评论
.datascopedSlots.default[0]