заполнить элементы формы HTML из объекта с помощью jQuery

Question

Мои элементы написаны на Object. Мне нужно заполнить HTML form элементами из этого. Проблема в том, что объект содержит различные типы ввода, структуру, пользовательские правила и т. Д. Например, будет ввод текста, ввод изображения типа, поле выбора, радио, флажок и т. Д. Итак, я не понимаю, что зацикливание на объекте будет хорошим идея (я начал это, но не смог завершить сам :(). Я мог бы написать элемент тега html и в файле html. Но я должен взять значение из этого object. Итак, какое решение лучше за это?

Пример объекта:

var formObj = {
    username: {
    value: null,
    type: 'text',
    placeholder: 'Enter username'
  },
  password: {
    value: null,
    type: 'password',
    placeholder: 'enter password'
  },
  country: {
    value: null,
    type: 'select',
    defaultText: 'Choose here',
    option: [
        {
            value: '1',
        label: 'Australia'
        },
      {
            value: '2',
        label: 'USA'
        },
      {
            value: '3',
        label: 'UK'
        }
    ]
  },
  gender: {
    value: null,
    type: 'select',
    defaultText: null,
    option: [
        {
            value: 'male',
        label: 'Male'
        },
      {
            value: 'female',
        label: 'Female'
        },
      {
            value: 'other',
        label: 'Other'
        }
    ]
  }
}

jsfiddle demo

Answer 1

исправлена ​​ваша демоверсия jsfiddle

Добавлены некоторые комментарии к вашей демонстрации.Я также изучил бы шаблонные строки .Они сделают вашу жизнь проще и очистят код :) и принцип единой ответственности для разбивки вашего кода на более легкие в управлении / чтении части.

var html = ''; // <-- Initialize as empty string for `+=`
$.each(formObj, function(key, value) {
  if (value.value === null) {
    value.value = '';
  }

  // Add label
  html += '<label for="' + key + '">' + key + '</label>';

  // Add input
  if (value.type === 'select') {
    // Type is select
    html += '<select class="form-control">' + generateOptionPlaceholder(value.defaultText) + generateOptionMarkup(value.option) + '</select>';
  } else {
    html += '<input name="' + key + '" type="' + value.type + '" value="' + value.value + '" placeholder="' + value.placeholder + '" class="form-control" />';
  }

  console.log(html);
});

Answer 2

Вы можете использовать шаблон стратегии для такого рода вещей.Для любого отклонения используется словарь, в котором ключи основаны на варианте, а значения являются функцией, вызываемой для этого варианта.

Например, если ваш объект с данными формы имеет такую ​​структуру:

var form = {
    "field1": {
        type: "text"
        value: "foo",
        attrs: {...}
    },
    ...
}

Вы можете использовать стратегию для обработки различных типов полей.Ваш словарь стратегий может начинаться так:

var FIELD_STRATEGY = {
    "input": function (name, value, attrs) {
        // General purpose method for <input>
        // Needs type included in attrs
    "text": function (name, value, attrs) {
        // Constructs an <input type="text">
        attrs.type = "text";
        return FIELD_STRATEGY.input(name, value, attrs);
    },
    "option": function (value, label, attrs) {
        // Constructs an <option>
    },
    "select": function (name, options, attrs {
        // Constructs a <select>
        var opts = options.map(function(opt) {
            return FIELD_STRATEGY.option(
                null,
                opt.value,
                opt.label);
            }).join("");
        var attr_str = Object.keys(attrs).map(function(attr) {
            var value = attrs[attr];
            return name + '="' + value '"';
        }).join(" ");
        return '<select name="' + name + '" ' + attr_str + '>' +
            opts + '</select>';
    }
};

Чтобы использовать его, переберите имена полей и вызовите стратегии на основе типа:

var fields = Object.keys(form).map(function (name) {
    var conf = form[name] || {};
    var strategy = FIELD_STRATEGY[conf.type];
    var rendered = "";

    if (strategy) {
        rendered = strategy(name, conf.value, conf.attrs);
    }

    return rendered;
});

Это даст вам окончательные полясписок, содержащий отображаемые строки на основе стратегии для каждого типа поля.