存储来自多个输入组的 JSON 对象答案

【问题标题】：Store JSON Object from multiple input groups存储来自多个输入组的 JSON 对象
【发布时间】：2021-05-25 06:08:53
【问题描述】：

注意：下面提供了一个可行的解决方案；但是，Array.map... 在 IE 中不起作用。我需要一个同样适用于 IE 的解决方案。

原帖：
我有一个动态输入组（可以添加和删除组）。
每个输入组都有一个状态选择和一个文本框。

我想遍历 keyup/change 事件的输入并将值存储在键值对中，如下所示：

licGroupObj = [
{“licState”：“WA”，“licNum”：“111”}，
{ "licState": "OR", "licNum": "222" },
{ "licState": "CA", "licNum": "333" }]

我尝试了以下方法，但它不起作用。我需要在某处添加一个循环。

 $('body').on('change keyup', '.license_state, .license_input', function () {
               
                var licGroupObj = {};
                licGroupObj = $('.license_group').map(function () {
                    var licState = $('.license_state').val();
                    var licNum = $('.license_input').val();
                    return { licState, licNum } ;
                }).get();

                
                $('#InputForLicenseObject').val('');
                $('#InputForLicenseObject').val(JSON.stringify(licGroupObj));
            });

fieldset {
  border: 1px solid #222 !important;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem 1rem 1rem !important;
}

legend {
  position: absolute;
  transform: translate(-2px, -20px);
  background: #fff;
  width: unset !important;
  font-size: 0.85rem !important;
}

.form-select {
  border-radius: 0 !important;
}

.license_group .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
    <main class="container py-3">
       <label>Store Input Values</label>
        <input type="text" class="form-control"  placeholder="License Object" aria-label="License Number" id="InputForLicenseObject" />

        <fieldset id="buildlicenseform" class="my-3">
            <legend>License Group</legend>
            <div class="input-group my-3 license_group">
                <span>
                    <select name="LicenseState" class="form-select license_state" aria-label="License State" required="">
                        <option selected="">State</option>
                        <option value="AL">AL</option>
                        <option value="AK">AK</option>
                        <option value="AZ">AZ</option>
                        <option value="AR">AR</option>
                        <option value="CA">CA</option>
                        <option value="CO">CO</option>
                        <option value="CT">CT</option>
                        <option value="DE">DE</option>
                        <option value="DC">DC</option>
                        <option value="FL">FL</option>
                        <option value="GA">GA</option>
                        <option value="HI">HI</option>
                        <option value="ID">ID</option>
                        <option value="IL">IL</option>
                        <option value="IN">IN</option>
                        <option value="IA">IA</option>
                        <option value="KS">KS</option>
                        <option value="KY">KY</option>
                        <option value="LA">LA</option>
                        <option value="ME">ME</option>
                        <option value="MD">MD</option>
                        <option value="MA">MA</option>
                        <option value="MI">MI</option>
                        <option value="MN">MN</option>
                        <option value="MS">MS</option>
                        <option value="MO">MO</option>
                        <option value="MT">MT</option>
                        <option value="NE">NE</option>
                        <option value="NV">NV</option>
                        <option value="NH">NH</option>
                        <option value="NJ">NJ</option>
                        <option value="NM">NM</option>
                        <option value="NY">NY</option>
                        <option value="NC">NC</option>
                        <option value="ND">ND</option>
                        <option value="OH">OH</option>
                        <option value="OK">OK</option>
                        <option value="OR">OR</option>
                        <option value="PA">PA</option>
                        <option value="RI">RI</option>
                        <option value="SC">SC</option>
                        <option value="SD">SD</option>
                        <option value="TN">TN</option>
                        <option value="TX">TX</option>
                        <option value="UT">UT</option>
                        <option value="VT">VT</option>
                        <option value="VA">VA</option>
                        <option value="WA">WA</option>
                        <option value="WV">WV</option>
                        <option value="WI">WI</option>
                        <option value="WY">WY</option>
                    </select>
                </span>
                <input type="text" name="LicenseInput" class="form-control license_input" placeholder="License Number" aria-label="License Number">
                <button class="btn btn-light border add_remove_license_button remove_license_button">
                    <i class="bi bi-dash-circle-fill"></i>
                </button>
            </div><div class="input-group my-3 license_group"><span><select name="LicenseState" class="form-select license_state" aria-label="License State"><option selected="">State</option><option value="AL">AL</option><option value="AK">AK</option><option value="AZ">AZ</option><option value="AR">AR</option><option value="CA">CA</option><option value="CO">CO</option><option value="CT">CT</option><option value="DE">DE</option><option value="DC">DC</option><option value="FL">FL</option><option value="GA">GA</option><option value="HI">HI</option><option value="ID">ID</option><option value="IL">IL</option><option value="IN">IN</option><option value="IA">IA</option><option value="KS">KS</option><option value="KY">KY</option><option value="LA">LA</option><option value="ME">ME</option><option value="MD">MD</option><option value="MA">MA</option><option value="MI">MI</option><option value="MN">MN</option><option value="MS">MS</option><option value="MO">MO</option><option value="MT">MT</option><option value="NE">NE</option><option value="NV">NV</option><option value="NH">NH</option><option value="NJ">NJ</option><option value="NM">NM</option><option value="NY">NY</option><option value="NC">NC</option><option value="ND">ND</option><option value="OH">OH</option><option value="OK">OK</option><option value="OR">OR</option><option value="PA">PA</option><option value="RI">RI</option><option value="SC">SC</option><option value="SD">SD</option><option value="TN">TN</option><option value="TX">TX</option><option value="UT">UT</option><option value="VT">VT</option><option value="VA">VA</option><option value="WA">WA</option><option value="WV">WV</option><option value="WI">WI</option><option value="WY">WY</option></select></span><input type="text" name="LicenseInput" class="form-control license_input" placeholder="License Number" aria-label="License Number"><button class="btn btn-light border add_remove_license_button remove_license_button"><i class="bi bi-dash-circle-fill"></i></button></div><div class="input-group my-3 license_group"><span><select name="LicenseState" class="form-select license_state" aria-label="License State"><option selected="">State</option><option value="AL">AL</option><option value="AK">AK</option><option value="AZ">AZ</option><option value="AR">AR</option><option value="CA">CA</option><option value="CO">CO</option><option value="CT">CT</option><option value="DE">DE</option><option value="DC">DC</option><option value="FL">FL</option><option value="GA">GA</option><option value="HI">HI</option><option value="ID">ID</option><option value="IL">IL</option><option value="IN">IN</option><option value="IA">IA</option><option value="KS">KS</option><option value="KY">KY</option><option value="LA">LA</option><option value="ME">ME</option><option value="MD">MD</option><option value="MA">MA</option><option value="MI">MI</option><option value="MN">MN</option><option value="MS">MS</option><option value="MO">MO</option><option value="MT">MT</option><option value="NE">NE</option><option value="NV">NV</option><option value="NH">NH</option><option value="NJ">NJ</option><option value="NM">NM</option><option value="NY">NY</option><option value="NC">NC</option><option value="ND">ND</option><option value="OH">OH</option><option value="OK">OK</option><option value="OR">OR</option><option value="PA">PA</option><option value="RI">RI</option><option value="SC">SC</option><option value="SD">SD</option><option value="TN">TN</option><option value="TX">TX</option><option value="UT">UT</option><option value="VT">VT</option><option value="VA">VA</option><option value="WA">WA</option><option value="WV">WV</option><option value="WI">WI</option><option value="WY">WY</option></select></span><input type="text" name="LicenseInput" class="form-control license_input" placeholder="License Number" aria-label="License Number"><button class="btn btn-light border add_remove_license_button remove_license_button"><i class="bi bi-dash-circle-fill"></i></button></div>
        </fieldset>
    </main>

【问题讨论】：

标签： arrays json loops input

【解决方案1】：

map 是一个循环。因为您使用了$('.license_state').val() 和$('.license_input').val()，所以它只获取找到的第一个元素。相反，在地图的回调中，您应该在元素参数中包含索引和元素并使用选择器。另外，我不建议在这种情况下使用keyup 事件，即使用户按下不影响输入的ctr 也会触发，input 事件更好

$('body').on('change input', '.license_state, .license_input', function () {
    var licGroupObj = {};
    licGroupObj = $('.license_group').map(function (idx, ele) {
        var licState = $(ele).find('.license_state').val();
        var licNum = $(ele).find('.license_input').val();
        return { licState, licNum };
    }).get();

    $('#InputForLicenseObject').val('');
    $('#InputForLicenseObject').val(JSON.stringify(licGroupObj));
});

fieldset {
    border: 1px solid #222 !important;
    border-radius: 0.25rem;
    padding: 0.5rem 1rem 1rem 1rem !important;
}

legend {
    position: absolute;
    transform: translate(-2px, -20px);
    background: #fff;
    width: unset !important;
    font-size: 0.85rem !important;
}

.form-select {
    border-radius: 0 !important;
}

.license_group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
    crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<main class="container py-3">
    <label>Store Input Values</label>
    <input type="text" class="form-control" placeholder="License Object" aria-label="License Number"
        id="InputForLicenseObject" />

    <fieldset id="buildlicenseform" class="my-3">
        <legend>License Group</legend>
        <div class="input-group my-3 license_group">
            <span>
                <select name="LicenseState" class="form-select license_state" aria-label="License State"
                    required="">
                    <option selected="">State</option>
                    <option value="AL">AL</option>
                    <option value="AK">AK</option>
                    <option value="AZ">AZ</option>
                    <option value="AR">AR</option>
                    <option value="CA">CA</option>
                    <option value="CO">CO</option>
                    <option value="CT">CT</option>
                    <option value="DE">DE</option>
                    <option value="DC">DC</option>
                    <option value="FL">FL</option>
                    <option value="GA">GA</option>
                    <option value="HI">HI</option>
                    <option value="ID">ID</option>
                    <option value="IL">IL</option>
                    <option value="IN">IN</option>
                    <option value="IA">IA</option>
                    <option value="KS">KS</option>
                    <option value="KY">KY</option>
                    <option value="LA">LA</option>
                    <option value="ME">ME</option>
                    <option value="MD">MD</option>
                    <option value="MA">MA</option>
                    <option value="MI">MI</option>
                    <option value="MN">MN</option>
                    <option value="MS">MS</option>
                    <option value="MO">MO</option>
                    <option value="MT">MT</option>
                    <option value="NE">NE</option>
                    <option value="NV">NV</option>
                    <option value="NH">NH</option>
                    <option value="NJ">NJ</option>
                    <option value="NM">NM</option>
                    <option value="NY">NY</option>
                    <option value="NC">NC</option>
                    <option value="ND">ND</option>
                    <option value="OH">OH</option>
                    <option value="OK">OK</option>
                    <option value="OR">OR</option>
                    <option value="PA">PA</option>
                    <option value="RI">RI</option>
                    <option value="SC">SC</option>
                    <option value="SD">SD</option>
                    <option value="TN">TN</option>
                    <option value="TX">TX</option>
                    <option value="UT">UT</option>
                    <option value="VT">VT</option>
                    <option value="VA">VA</option>
                    <option value="WA">WA</option>
                    <option value="WV">WV</option>
                    <option value="WI">WI</option>
                    <option value="WY">WY</option>
                </select>
            </span>
            <input type="text" name="LicenseInput" class="form-control license_input" placeholder="License Number"
                aria-label="License Number">
            <button class="btn btn-light border add_remove_license_button remove_license_button">
                <i class="bi bi-dash-circle-fill"></i>
            </button>
        </div>
        <div class="input-group my-3 license_group">
            <span>
                <select name="LicenseState"
                    class="form-select license_state" aria-label="License State">
                    <option selected="">State</option>
                    <option value="AL">AL</option>
                    <option value="AK">AK</option>
                    <option value="AZ">AZ</option>
                    <option value="AR">AR</option>
                    <option value="CA">CA</option>
                    <option value="CO">CO</option>
                    <option value="CT">CT</option>
                    <option value="DE">DE</option>
                    <option value="DC">DC</option>
                    <option value="FL">FL</option>
                    <option value="GA">GA</option>
                    <option value="HI">HI</option>
                    <option value="ID">ID</option>
                    <option value="IL">IL</option>
                    <option value="IN">IN</option>
                    <option value="IA">IA</option>
                    <option value="KS">KS</option>
                    <option value="KY">KY</option>
                    <option value="LA">LA</option>
                    <option value="ME">ME</option>
                    <option value="MD">MD</option>
                    <option value="MA">MA</option>
                    <option value="MI">MI</option>
                    <option value="MN">MN</option>
                    <option value="MS">MS</option>
                    <option value="MO">MO</option>
                    <option value="MT">MT</option>
                    <option value="NE">NE</option>
                    <option value="NV">NV</option>
                    <option value="NH">NH</option>
                    <option value="NJ">NJ</option>
                    <option value="NM">NM</option>
                    <option value="NY">NY</option>
                    <option value="NC">NC</option>
                    <option value="ND">ND</option>
                    <option value="OH">OH</option>
                    <option value="OK">OK</option>
                    <option value="OR">OR</option>
                    <option value="PA">PA</option>
                    <option value="RI">RI</option>
                    <option value="SC">SC</option>
                    <option value="SD">SD</option>
                    <option value="TN">TN</option>
                    <option value="TX">TX</option>
                    <option value="UT">UT</option>
                    <option value="VT">VT</option>
                    <option value="VA">VA</option>
                    <option value="WA">WA</option>
                    <option value="WV">WV</option>
                    <option value="WI">WI</option>
                    <option value="WY">WY</option>
                </select></span><input type="text" name="LicenseInput" class="form-control license_input"
                placeholder="License Number" aria-label="License Number"><button
                class="btn btn-light border add_remove_license_button remove_license_button"><i
                    class="bi bi-dash-circle-fill"></i></button></div>
        <div class="input-group my-3 license_group">
            <span>
                <select name="LicenseState"
                    class="form-select license_state" aria-label="License State">
                    <option selected="">State</option>
                    <option value="AL">AL</option>
                    <option value="AK">AK</option>
                    <option value="AZ">AZ</option>
                    <option value="AR">AR</option>
                    <option value="CA">CA</option>
                    <option value="CO">CO</option>
                    <option value="CT">CT</option>
                    <option value="DE">DE</option>
                    <option value="DC">DC</option>
                    <option value="FL">FL</option>
                    <option value="GA">GA</option>
                    <option value="HI">HI</option>
                    <option value="ID">ID</option>
                    <option value="IL">IL</option>
                    <option value="IN">IN</option>
                    <option value="IA">IA</option>
                    <option value="KS">KS</option>
                    <option value="KY">KY</option>
                    <option value="LA">LA</option>
                    <option value="ME">ME</option>
                    <option value="MD">MD</option>
                    <option value="MA">MA</option>
                    <option value="MI">MI</option>
                    <option value="MN">MN</option>
                    <option value="MS">MS</option>
                    <option value="MO">MO</option>
                    <option value="MT">MT</option>
                    <option value="NE">NE</option>
                    <option value="NV">NV</option>
                    <option value="NH">NH</option>
                    <option value="NJ">NJ</option>
                    <option value="NM">NM</option>
                    <option value="NY">NY</option>
                    <option value="NC">NC</option>
                    <option value="ND">ND</option>
                    <option value="OH">OH</option>
                    <option value="OK">OK</option>
                    <option value="OR">OR</option>
                    <option value="PA">PA</option>
                    <option value="RI">RI</option>
                    <option value="SC">SC</option>
                    <option value="SD">SD</option>
                    <option value="TN">TN</option>
                    <option value="TX">TX</option>
                    <option value="UT">UT</option>
                    <option value="VT">VT</option>
                    <option value="VA">VA</option>
                    <option value="WA">WA</option>
                    <option value="WV">WV</option>
                    <option value="WI">WI</option>
                    <option value="WY">WY</option>
                </select></span><input type="text" name="LicenseInput" class="form-control license_input"
                placeholder="License Number" aria-label="License Number"><button
                class="btn btn-light border add_remove_license_button remove_license_button"><i
                    class="bi bi-dash-circle-fill"></i></button></div>
    </fieldset>
</main>

【讨论】：

完美运行。谢谢你。还将删除 keyup 事件并使用输入。 :)
在IE中测试后，不支持Array.map。我需要一种方法来循环和创建也适用于 IE 的对象数组。
@AmyRuddy 你试过正常的for 循环吗？它适用于 IE >= 3
是的，我是。感谢您提醒发布更新。以下适用于 IE 并替换 Array.map 解决方案： licGroupObj = []; // 清空许可对象，然后存储新值 let inputs = $('.license_group'); for (let i = 0; i

【解决方案2】：

上面使用 Array.map 的第一个解决方案效果很好；但是，它在 IE 中不起作用，但以下内容可以。还需要替换 => 函数以及 .contains()，IE 中都不支持。

licGroupObj = []; // Empty the License Objecte, then store new values
       
        let inputs = $('.license_group');

        for (let i = 0; i < inputs.length; i++) {

            let licState = $(inputs[i]).find('.license_state').val();

            let licNum = $(inputs[i]).find('.license_input').val();

            licGroupObj.push({ "licState": licState, "licNum": licNum });

//Does not work in IE
    // var result = licGroupObj.filter(obj => obj.licNum !== '');

// Works in IE
       var result = licGroupObj.filter(function (obj) {return obj.licNum !== ''; });

//insted of .contains with indexOf:
// does not contain [{
    if (licVal.length > 0 && licVal.indexOf(regex) == -1) { 
    if (licVal.indexOf(regex) >= 0) {

【讨论】：