Question

我想根据来自服务器的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字段。

有可能实现这一目标吗？

谢谢！

Answer 1

您可以尝试以下操作：

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>`
  }
});

可以从json ionic制作动态html

1 个答案: