как создать генератор форм из объекта json с помощью js

ProgramBox

как создать генератор форм из объекта json с помощью js

Post author:admin
Запись опубликована:16 апреля, 2023
Post category:Вопросы по программированию

#javascript #json

Вопрос:

как создать текст в той же строке другого объекта с помощью объекта JSON, например: ТЕКСТ: ввод текста и кнопка отправки, которая, если я пишу значение внутри входного текста, автоматически записывает значения для другого входного текста, как я могу это сделать, мне было действительно сложно разобраться, и я провел исследование по этому поводу, но я ничего не нашел, так что вы можете помочь.

 const objs = [{ "Object1": { "ID": 1, "type": "input", "color": "red", "Text": "DARKDRAGON", "width": "150px", "height": "40px", "top": "15px", "left": "5px", "Font": { "fontName": "tahoma", "font": "17px" } }, "Object2": { "ID": 2, "type": "textarea", "color": "cyan", "Text": "SPEEDYTIGER", "width": "150px", "height": "40px", "top": "70px", "left": "5px", "Font": { "fontName": "tahoma", "font": "17px" } }, "Object3": { "ID": 3, "type": "input", "color": "blue", "Text": "AMyesteriousAdults", "width": "200px", "height": "40px", "top": "130px", "left": "5px", "Font": { "fontName": "tahoma", "font": "17px" } }, "Object4": { "ID": 4, "type": "button", "color": "darkorange", "Text": "AMyesteriousDarkSpeed", "width": "200px", "height": "40px", "top": "190px", "left": "5px", "Font": { "fontName": "tahoma", "font": "17px" } } }]


Object.keys(objs[0]).forEach(key => {

  const formItem = objs[0][key];
  const elmn = document.createElement(formItem.type);
  if (formItem.type === "button") elmn.innerHTML = formItem.Text;
  else elmn.value = formItem.Text;
  Object.assign(elmn.style, {
    position: 'absolute',
    color: formItem.color,
    width: formItem.width,
    height: formItem.height,
    top: formItem.top,
    left: formItem.left,
    fontFamily: formItem.Font.fontName,
    fontSize: formItem.Font.font,
  });

  document.getElementById('ColorArea').appendChild(elmn);
});

 <div id="ColorArea"></div>

1. все, что я хочу, это создать вводимый текст, который, например, когда я нажимаю кнопку отправки, помещает значение для всех объектов

2. если вы не поняли, я постараюсь сделать все возможное, чтобы объяснить

3. хотите больше объяснений, пожалуйста, спрашивайте

4. просто используя (json и Js)

5. @mplungjan я сделал то, что ты хочешь, я отредактировал это, и есть больше информации

Ответ №1:

Нравится это?

https://jsfiddle.net/mplungjan/otbgvzp8/

 const objs = [{ "Object1": { "ID": 1, "type": "input", "color": "red", "Text": "DARKDRAGON", "width": "150px", "height": "40px", "top": "15px", "left": "5px", "Font": { "fontName": "tahoma", "font": "17px" } }, "Object2": { "ID": 2, "type": "textarea", "color": "cyan", "Text": "SPEEDYTIGER", "width": "150px", "height": "40px", "top": "70px", "left": "5px", "Font": { "fontName": "tahoma", "font": "17px" } }, "Object3": { "ID": 3, "type": "input", "color": "blue", "Text": "AMyesteriousAdults", "width": "200px", "height": "40px", "top": "130px", "left": "5px", "Font": { "fontName": "tahoma", "font": "17px" } }, "Object4": { "ID": 4, "type": "button", "color": "darkorange", "Text": "AMyesteriousDarkSpeed", "width": "200px", "height": "40px", "top": "190px", "left": "5px", "Font": { "fontName": "tahoma", "font": "17px" } } }];

const breakFlex = document.createElement("p");
breakFlex.style.flexBasis = "100%";
breakFlex.style.height= 0;

Object.keys(objs[0]).forEach(key => {

  const formItem = objs[0][key];
  const elmn = document.createElement(formItem.type);
  if (formItem.type === "button")
    elmn.innerHTML = formItem.Text;
  else
    elmn.placeholder = formItem.Text;
  Object.assign(elmn.style, {
    color: formItem.color,
    width: formItem.width,
    height: formItem.height,
    top: formItem.top,
    left: formItem.left,
    fontFamily: formItem.Font.fontName,
    fontSize: formItem.Font.font,
    flex: '1 0 45%',
  });
  if (formItem.type !== "button") {
    const label = document.createElement("label");
    label.innerHTML = formItem.Text   "<br/>";
    label.style.fontSize="smaller";
    label.appendChild(elmn);
    document.getElementById('ColorArea').appendChild(label);
  } else document.getElementById('ColorArea').appendChild(elmn);
  document.getElementById('ColorArea').appendChild(breakFlex.cloneNode());
});

 <div id="ColorArea" style='display:flex;flex-wrap: wrap'>

</div>

1. PS: breakFlex.classList.add("break") Сейчас в этом нет необходимости

2. почему я не могу изменить ширину этой кнопки? это потому, что я не вставил css?

3. Это гибкий. Вы добавили flex: '1 0 45%', ко всем элементам. Удалите или измените это для кнопки

Ответ №2:

Хорошо, вот пример, я изменил ваш объект JSON, чтобы вы могли добавить больше стилей и типов… я не знаю, это то, чего вы хотите…

 var inputs = [
  {
    "ID": "inp1",
    "Element": "input",
    "Type": "text",
    "Text": "your name",
    "Styles": {
      "font-family": "tahoma",
      "font-size": "17px"
    }
  },
  {
    "ID": "inp5",
    "Element": "input",
    "Type": "number",
    "Text": "your age",
    "Styles": {
      "font-family": "tahoma",
      "font-size": "17px",
      "color": "yellow",
      "background": "blue" 
    }
  },
  {
    "ID": "inp16",
    "Element": "input",
    "Type": "password",
    "Text": "put your password",
    "Styles": {
      "font-family": "tahoma",
      "font-size": "17px",
      "color": "blue",
      "background": "yellow" 
    }
  }
];

function createForm(someInputs) {
  var newForm = document.createElement("form");
  someInputs.forEach(function(input) {
    var styles = "";
    Object.keys(input.Styles).forEach(function(key) {
      styles  = `${key}: ${input.Styles[key]};`;
    });
    newForm.innerHTML  = `<${input.Element} type="${input.Type}" id="${input.Id}" placeholder="${input.Text}" style="${styles}"><br>`;
  });
  document.body.appendChild(newForm);
}

createForm(inputs);