0

我正在尝试创建一个基于表单中的选择生成文件的系统。目前我使用 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

用于下载文件和 JSON 部分的 js 函数。

<!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 循环。但我不知道如何选择确切的数据。

提前致以诚挚的问候和感谢

4

1 回答 1

0

我仍然需要正确过滤它,但我得到了我需要的数据,我看起来有点太远了。除了使用自定义提交端点链接之外,还有另一种更简单的方法。

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

这我现在可以根据我的需要进行过滤。我尝试直接从“提交”中获取数据,所以我走上了正确的道路。

于 2019-03-21T14:51:12.030 回答