将JSON对象转换为HTML模板

我使用Angular 6，我的模板如下

页眉、左面板、车身板件、页脚

页眉、左面板、车身板件、右面板、页脚

页眉、正文部分、页脚

因为我有很多模板，所以我想让它成为JSON驱动的，而不仅仅是硬编码html部分

JSON文件如下所示：

{
   "horizontal" : [
     {
      width : 20%,
      height: 100%
     },
     {
      width : 80%,
      height: 100%,
      {
       "vertical" : [
         {
           width : 80%,
           height: 60%
         },
         {
           width : 80%,
           height: 40%
         }
       ]
      }
     }
   ],
 }

在这里，页面分为左面板（20%宽度）和主体（80%），然后主体垂直分为60%顶部和20%底部

有没有办法将这个JSON转换成HTML

---

谢谢

虽然这个问题太宽泛了，但我也是一个后端人员，在着陆之前我没有考虑过很多想法，所以我决定发布一个答案并分享我的经验

我的意图是展示如何简单，用很少的代码，就可以创建可重用且易于维护的东西

---

与其将样式从JSON转换为HTML，不如使用CSS，下面是一些示例，说明如何使用一个小的样式指南管理多个模板，并获得其中一个最佳特性，即性能

有了一个CSS，使用Flexbox制作，以及不同模板的给定逻辑，它可能看起来像这样

示例1（带有CSS注释）

html，主体，.container{
身高：100%；
保证金：0；
}
.货柜{
显示：flex；/*使子项成为flex项*/
弹性方向：列；/*默认流为行*/
}
页眉、页脚{/*弹性列项默认情况下将填充父项的宽度*/
/*高度由内容控制*/
}
.wrapper{
柔性：1；/*填充剩余高度（柔性柱项目）*/
显示器：flex；
}
除此之外{/*弹性行项目默认情况下将填充父级的高度*/
弹性基础：20%；/*设置宽度（弹性列项目）*/
}
主要{
柔性：1；/*填充剩余宽度（柔性行项目）*/
}
部分{
弹性基准：60%；/*设置高度（弹性柱项目）*/
}
节+节{/*以第二节为目标*/
弹性基准：40%；
}
/*用于演示目的*/
页眉、页脚、侧边、节{
边框：1px点灰色；
}

标题
在一边
部分
部分
页脚

到目前为止您尝试了什么？我对HTML是新手。我基本上是一个后端开发人员，第一次尝试使其动态化。我正在寻找类似动态表单的东西，但不确定是否要进行此转换。您是否听说过Bootstrap toolkit grid system，它将有助于了解flex grid system，有一个很好的教程（在这里付费）flexbox.io，还有一个类似Bootstrap的免费骨架：flexboxgrid.com如果它有帮助，请寻找像mustach.js这样的模板引擎，车把等参考：它将为您创建一个模板，每次您都可以根据不同的对象数据进行更改。非常感谢您的详细回答。我不想硬编码20%左右，因为它将是数据库驱动的。因此，我不能用CSS硬编码，我希望这也是动态的。@user1578872我的回答并不能阻止这一点，它只是展示了如何利用内置技术，例如，我提供的CSS动态生成并不比JSON文件示例更困难。我试着动态设置值，如，，但它不起作用。不确定如何动态传递%value？@user1578872我不知道Angularjs，因此无法帮助您完成该部分，尽管这是一个非常具体的问题，请将其作为新问题发布，并提供更多详细信息，您肯定会得到答案。