Нужно сгенерировать файл на основе формы ввода и скачать его (FormIO) - PullRequest
0 голосов
/ 19 марта 2019

Я пытаюсь создать систему, которая генерирует файл на основе выбора в форме.В настоящее время я использую FormIO для генерации форм из структуры json. FormIO построитель форм

Поэтому, когда я нажимаю "Отправить", он загружает файл с моими выбранными значениями.Я знаю, что это уже порождает объект.Но я не знаю, как это отфильтровать.

Сейчас он генерирует файл с этим в нем.Но я хотел бы иметь только значение переключателя и имя.

{"data":{"radio2":1,"howLongShouldItWait":12,"submit":true},"metadata":{"timezone":"Europe/Brussels","offset":60,"referrer":"","browserName":"Netscape","userAgent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0","pathName":"/C:/Users/Jan/Desktop/IPP_conf/index.html","onLine":true},"state":"submitted","saved":false}

Так что я в конечном итоге хочу что-то вроде этого

#define WAIT_TIME 3
#define OVERRIDE_BUTN

Функция js для загрузки файла ичасть JSON.

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

  <title>Configuration form</title>

  <!-- Bootstrap core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css">
  <script src="https://unpkg.com/formiojs@latest/dist/formio.full.min.js"></script>

</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img src="resources/logo64x64.png" alt="">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
        aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home
              <span class="sr-only">(current)</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Page Content -->
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h1 class="mt-5">Settings</h1>

    
          <div id="formio"></formio>

          </div>
      

      </div>

      <!-- Bootstrap core JavaScript -->
      <script src="vendor/jquery/jquery.min.js"></script>
      <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
      <script>
      Formio.icons = 'fontawesome';
Formio.createForm(document.getElementById('formio'), {
    "display": "form",
    "components": [
        {
            "label": "Test",
            "optionsLabelPosition": "right",
            "values": [
                {
                    "label": "Yes",
                    "value": "1",
                    "shortcut": ""
                },
                {
                    "label": "No",
                    "value": "0",
                    "shortcut": ""
                }
            ],
            "inline": true,
            "mask": false,
            "tableView": true,
            "alwaysEnabled": false,
            "type": "radio",
            "input": true,
            "key": "radio2",
            "defaultValue": 1,
            "validate": {
                "customMessage": "",
                "json": ""
            },
            "conditional": {
                "show": "",
                "when": "",
                "json": ""
            },
            "encrypted": false,
            "properties": {},
            "customConditional": "",
            "logic": [],
            "reorder": false
        },
        {
            "label": "How long should it wait?",
            "optionsLabelPosition": "right",
            "values": [
                {
                    "label": "1 Hour",
                    "value": "1",
                    "shortcut": ""
                },
                {
                    "label": "12 Hours",
                    "value": "12",
                    "shortcut": ""
                }
            ],
            "inline": true,
            "mask": false,
            "tableView": true,
            "alwaysEnabled": false,
            "type": "radio",
            "input": true,
            "key": "howLongShouldItWait",
            "defaultValue": 12,
            "validate": {
                "customMessage": "",
                "json": ""
            },
            "conditional": {
                "show": "",
                "when": "",
                "json": ""
            },
            "encrypted": false,
            "reorder": false,
            "properties": {},
            "customConditional": "",
            "logic": []
        },
        {
            "label": "Generate",
            "state": "",
            "theme": "primary",
            "shortcut": "",
            "disableOnInvalid": true,
            "mask": false,
            "tableView": true,
            "alwaysEnabled": false,
            "type": "button",
            "key": "submit",
            "input": true,
            "defaultValue": false,
            "validate": {
                "customMessage": "",
                "json": ""
            },
            "conditional": {
                "show": "",
                "when": "",
                "json": ""
            },
            "encrypted": false,
            "properties": {
                "test": "5"
            },
            "tags": [],
            "showValidations": false,
            "event": "",
            "url": "",
            "custom": "",
            "reorder": false,
            "customConditional": "",
            "logic": []
        }
    ],
}).then(function (form) {


  var filename = "settings.h";

  function download(filename, text) {
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    element.setAttribute('download', filename);

    element.style.display = 'none';
    document.body.appendChild(element);

    element.click();

    document.body.removeChild(element);
  }


  form.on('submit', function (submission) {

    console.log(submission);

    download(filename, JSON.stringify(submission));
  });
});</script>



</body>

</html>

Я пробовал цикл for для переменной представления.Но я не знаю, как выбрать точные данные.

С уважением и заранее спасибо

1 Ответ

0 голосов
/ 21 марта 2019

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

  for(key in submission.data){
  //Do stuff where key would be 0 and value would be the object
  console.log(key + ' ' + submission.data[key] );
}

Это теперь я могу фильтровать по моим потребностям.Я попытался получить данные прямо из «представления», поэтому я был на правильном пути.

...