将 HTML/Jenja 中的所有下拉数据发送回烧瓶服务器答案

【问题标题】：Send all dropdown data from HTML/Jenja back to flask server将 HTML/Jenja 中的所有下拉数据发送回烧瓶服务器
【发布时间】：2019-12-14 11:07:56
【问题描述】：

我在这里发布了一个类似的问题：Flask - Data inputting on the client side

但是，我想出了另一种解决该问题的方法，现在在下面遇到了一个新方法。

简而言之，我正在为我们的客户构建一个门户，他们可以在其中登录并上传他们的财务文件。 Flask 中有一个预定义的模式，用于映射上传文档中的财务项目。例如，所有与“现金”相关的帐户都将简单地映射到“现金”。

下面的 html 代码基本上呈现了一个类似于上传文件的表格，并带有一个附加列“映射”，用于映射帐户的每一行。如果财务文档中添加了新帐户，则会有一个下拉部分供客户选择映射模式。此处为您的视觉效果提供了屏幕截图。

https://drive.google.com/file/d/1RuYq3rdaG5XSxLTPYO46PlqBujuy_I8A/view?usp=sharing

我的问题是如何为“确认映射”按钮设置事件，以将所有选定的下拉输入以 JSON 对象的形式（最好）发送回烧瓶服务器。在这种情况下，我希望 JSON 是：

{
"Cash" : "Lucky money",
"Debt" : "Bad debt"
}

我在下面包含了一些 html 代码。我知道这不是很可复制，但我的公司代码库太大而无法分享。我只是对完成任务的一般方法感兴趣。

<!-- results.html -->

<body>
  <div>
     <table id="Mapped table">
       <h2 align='center'>Mapped data</h2>
          <tr>
              {% for col in column_names %}
              <th>{{col}}</th>
              {% endfor %}
          </tr>
          {% for row in row_new %}
          <tr>
              {% for col, row_ in zip(column_names, row) %}
              {% if col == link_column %}
              <td>

                <select id="dropbtn">
                  <option value="1">Cash</option>
                  <option value="2">Debt</option>
                  <option value="3">Retained Earnings</option>
                </select>

                <div id="selection"></div>

                <script>
                  var e = document.getElementById("dropbtn");
                  var strUser = e.options[e.selectedIndex].text;
                </script>

              </td>
              {% else %}
              <td>{{row_}}</td>
              {% endif %}
              {% endfor %}
          </tr>
          {% endfor %}
     </table>
  </div>

  <div class="wrapper">
    <button class="button" id="myBtn">Confirm mapping</button>
</body>

【问题讨论】：

标签： javascript python jquery flask jinja2

【解决方案1】：

你有一些问题：

ID 必须是唯一的。因此，您可以考虑将 select id="dropbtn" 更改为 **select class="dropbtn"
表格应包含正文、页眉和页脚。相反，您有一系列行（即：tr）
表 ID 包含一个空格。这是通过ID选择时的问题。为此，请查看escapeSelector

您的问题的可能解决方案是：

$('#myBtn').on('click', function(e) {
    var drpdbJson = {};
    // for each row containing a select....
    $('#Mapped\\ table tr:gt(0):has(select)').each(function(idx, ele) {
        // get the selected value
        var drpdwnKey = $(ele).find('.dropbtn option:selected').text();
        // get the second column text
        var drpdwnValue = $(ele).find('td:eq(1)').text();
        // add to the json result
        if (drpdbJson[drpdwnKey] == undefined) {
            drpdbJson[drpdwnKey] = drpdwnValue;
        } else {
            drpdbJson[drpdwnKey] = (typeof drpdbJson[drpdwnKey] === 'string') ? 
                    [drpdbJson[drpdwnKey], drpdwnValue] : [...drpdbJson[drpdwnKey], drpdwnValue];
        }
    })
    // print the json obj
    // pay attention: a json cannot contain duplicated keys:
    // if you select the same value for both select in the example....
    console.log(JSON.stringify(drpdbJson))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
    <h2 align='center'>Mapped data</h2>
    <table id="Mapped table">
        <tr>
            <th>Account Number</th>
            <th>Account Description</th>
            <th>Amount</th>
            <th>Mapping</th>
        </tr>
        <tr>
            <td>2010</td>
            <td>Lucky money</td>
            <td>1111.0</td>
            <td>
                <select class="dropbtn">
                    <option value="1" selected>Cash</option>
                    <option value="2">Debt</option>
                    <option value="3">Retained Earnings</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>1234</td>
            <td>Bad debt</td>
            <td>222222.0</td>
            <td>
                <select class="dropbtn">
                    <option value="1">Cash</option>
                    <option value="2" selected>Debt</option>
                    <option value="3">Retained Earnings</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>1234</td>
            <td>USD</td>
            <td>222222.0</td>
            <td>
                <select class="dropbtn">
                    <option value="1" selected>Cash</option>
                    <option value="2">Debt</option>
                    <option value="3">Retained Earnings</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>1234</td>
            <td>Petty cash</td>
            <td>222222.0</td>
            <td>
                <select class="dropbtn">
                    <option value="1" selected>Cash</option>
                    <option value="2">Debt</option>
                    <option value="3">Retained Earnings</option>
                </select>
            </td>
        </tr>
    </table>
</div>

<div class="wrapper">
    <button class="button" id="myBtn">Confirm mapping</button>
</div>

【讨论】：

嗨@gaetanoM，如何修改代码以存储每个键的多个值？例如，结果将如下所示： { "Cash" : ["lucky money", "USD"], "Debt": "Bad Debt" }
我只是假设现在还有另一个名为 USD 的“现金”项目。它基本上是需要映射的另一行。如何将“美元”和“压岁钱”添加到同一个键“现金”中？
这是新链接 :) drive.google.com/file/d/1sadDR0x8pJRzeJRS6pSvfDaNmKyoJ31G/…
嗨，如果只有 2 项相同的密钥，您的解决方案就可以工作。当我添加更多相同键的项目时，会添加更多括号，并且在烧瓶中处理变得非常困难。例如，如果我添加 'GBP' 和 'EURO'，JSON 将是： { "Cash" :[[["lucky money", "USD"],"GBP"],"EUR], "Debt": "Bad Debt" } 我想要的是：{ "Cash" :["lucky money", "USD", "GBP", "EUR"], "Debt": "Bad Debt" } 我一直在努力解决但到目前为止还没有运气