Можно сделать динамический html из json ionic

Question

Я хочу создать динамический HTML из ответа JSON, поступающего с сервера,

Например: допустим, ответ 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>`
  }
});