时间戳

首页 > 解决方案 > 可以从 json ionic 制作动态 html

javascript - 可以从 json ionic 制作动态 html

问题描述

我想从来自服务器的 JSON 响应中制作动态 html，

例如：假设来自服务器的 json 响应是

   param_data: any = {

     "fields": [
     { "type": "text", "name": "firstname", "label": "label", "required": true, "data": "", "frmctrlnm": "labelone" },    
     { "type": "button", "name": "firstname", "label": "label two", "required": true, "data": "", "frmctrlnm": "labeltwo" },    
     { "type": "input", "name": "Red", "label": "input", "required": true, "data": "", "frmctrlnm": "inputone" },  
     { "type": "input", "name": "BLue", "label": "input", "required": true, "data": "", "frmctrlnm": "inputone" },    
     { "type": "label", "name": "color_id", "label": "input two", "required": true, "data": "", "frmctrlnm": "inputtwo" },    
     { "type": "select", "name": "select", "label": "select", "required": true, "data": "", "frmctrlnm": "select" }

     ]}

基于来自服务器的类型，我想制作 html 组件并单击提交，我希望在字段中具有用户更新数据的相同 json。

有可能做到这一点吗？

先感谢您！

标签： javascripthtmlangularformsionic4

解决方案

你可以尝试这样的事情：

let htmlString = ``;

param_data.fields.forEach(element => {
  if (element.type == "text") {
    htmlString +=
      `<div class="form-group">
        <label class="control-label col-md-4">
          ${element.label}:
        </label>
        <div class="col-md-8">
          <input type="text" class="form-control"  name="${element.name}" ${element.required == true? 'required':''}>
        </div>
      </div>`
  }
});

推荐阅读